如何從角材料對話框窗口中獲得唯一單元的結果而無需重復？

Question

我有一些workig代碼，該代碼允許從表中的對話框窗口傳遞數據。 對於一行，它運行良好。 但是，如果我想在表中添加一些行，則會一次獲得幾列的結果。 如果我使用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 }
        ];

所有代碼都發送給竊聽器

Answer 1

我創建了一個示例供您遵循： 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>