如何在不从 angular material 对话框 window 重复的情况下获得单个单元格的结果？

Question

我有一些工作代码允许从 table 中的对话框 window 传递数据。对于一排它运作良好。但是，如果我想在 table 中添加一些行，我会同时获得多列的结果。如果我使用 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 }
        ];

所有代码到plunker

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>

如何在不从 angular material 对话框 window 重复的情况下获得单个单元格的结果？

How get a result for sole cell without repeat from angular material dialog window?

javascript

angularjs

angularjs-material

mddialog