Как получить результат для единственной ячейки без повторения из диалогового окна углового материала?

У меня есть рабочий код, который позволяет передавать данные из диалогового окна в таблицу. Для одной строки это работает хорошо. Но если я хочу добавить несколько строк в таблицу, я получаю результат сразу для нескольких столбцов. Как я могу получить результат для единственной ячейки без повторения, если я использую директиву angular js ng-repeat?

html

<table class="friends" style="display: inline-block; font-size: 10pt;" >
    <thead>
        <tr>
            <th>Name</th>
            <th ng-repeat="tablerow in tableRows" style="padding: 0.5rem;">{{tablerow.name}}</th>
        </tr>
    </thead>
    <tbody >
        <tr ng-repeat="n in userName">
            <td>{{n.name}}</td>
            <td ng-repeat="t in tableRows" class="category-{{t.favoriteColor}} table-height">
                <i class="material-icons dark md-18" ng-click="open($index, $event, it)">mode_edit</i> 

                    {{t.placeholder1}}
                    <br><hr>
                    {{t.placeholder2}}

            </td>
        </tr>
    </tbody>
</table>

js

        $scope.tableRows = [
            { name: 'AAA', 'placeholder1': null, 'placeholder2': null, favoriteColor: null },
            { name: 'BBB', 'placeholder1': null, 'placeholder2': null, favoriteColor: null },
            { name: 'CCC', 'placeholder1': null, 'placeholder2': null, favoriteColor: null },
            { name: 'DDD', 'placeholder1': null, 'placeholder2': null, favoriteColor: null },
            { name: 'EEE', 'placeholder1': null, 'placeholder2': null, favoriteColor: null },
            { name: 'FFF', 'placeholder1': null, 'placeholder2': null, favoriteColor: null }
        ];

All code to the plunker


javascript angularjs angularjs-material mddialog
person alexeyll    schedule 04.04.2018    source источник
comment
Можете ли вы уточнить, что именно вы спрашиваете? Когда вы говорите «единственная ячейка», к чему это относится?   -  person Yftach    schedule 04.04.2018
comment
Это означает, что если я передам данные в ячейку AAA - Jon, эти данные должны будут пройти только в эту ячейку. Теперь данные повторяются в столбце. Я думаю, что здесь нужно применить итеративный метод массива изнутри.   -  person alexeyll    schedule 04.04.2018
comment
Ну да, то, что вы делаете, не имеет смысла. Вы делаете: для каждого пользователя отображать строки. Затем вы меняете эти строки, потому что все пользователи используют одни и те же данные, все меняется. Что вы должны сделать, так это: для каждого пользователя создать объект со всеми именами столбцов. А затем отобразите этот объект, а не tableRows. потому что строки таблицы на самом деле не строки, а ее столбцы, а пользователи - строки. У вас вопрос, как сделать таблицу в angular?   -  person Yftach    schedule 04.04.2018
comment
Мне нужно перебрать массив, чтобы переданные данные из диалогового окна загружались в конкретную ячейку конкретного пользователя, а не все сразу во всех столбцах. Я предполагаю, что мне нужно переписать данные в массиве, чтобы он работал правильно. Здесь мне нужна помощь :)   -  person alexeyll    schedule 04.04.2018

Ответы (1)


arrow_upward
0
arrow_downward

Я создал для вас пример: https://plnkr.co/edit/yabbnjdnguc1JstIcyOe?p=preview

Основная концепция заключается в том, что у вас есть массив пользователей, и они отображают экземпляры строк. Если их нет, вы их создаете. Могут быть некоторые ошибки, но это основная идея. JavaScript:

$scope.open = function(index, ev, user,tableRow) {

                $mdDialog
                    .show({

                          data: {
                            name: tableRow.name,
                            placeholder1: user[tableRow.name] ? user[tableRow.name].placeholder1:  tableRow.placeholder1,
                            placeholder2: user[tableRow.name] ? user[tableRow.name].placeholder2: tableRow.placeholder2,
                            favoriteColor: user[tableRow.name] ? user[tableRow.name].favoriteColor: tableRow.favoriteColor,
                          }
                        },
                       )
                    .then(function(result) {
                      if (!user[result.name]) {
                        user[result.name] = {};
                      }
                      user[result.name].placeholder1 = result.placeholder1;
                      user[result.name].placeholder2 = result.placeholder2;
                      user[result.name].favoriteColor = result.favoriteColor;
                    });

HTML:

        <tbody >
        <tr ng-repeat="n in userName">
          <td>{{n.name}}</td>
              <td ng-repeat="t in tableRows" class="category-{{t.favoriteColor}} table-height">
                    <i class="material-icons dark md-18" ng-click="open($index, $event, n, t)">mode_edit</i> 

                        {{n[t.name].placeholder1}}
                        <br><hr>
                        {{n[t.name].placeholder2}}

                </td>
        </tr>
</tbody>
person Yftach    schedule 04.04.2018
comment
Да, это работает. Немного поправил код и теперь все работает корректно! Исправленный код здесь plnkr.co/edit/L4EV6pJEECQBmw0LVii0 Спасибо! - person alexeyll; 04.04.2018