javascriptangularjsangularjs-materialmddialog

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


I have some workig code which allows pass data from dialog window in the table. For one row it work well. But if I want to add some rows in table I get result for several columns at once. How can I get a result for a sole cell without repeat if I use angular js directive 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


Solution

  • I created an example for you to follow: https://plnkr.co/edit/yabbnjdnguc1JstIcyOe?p=preview

    The basic concept is you have your users array, and they display instances of the rows. If they don't exist you create them. Might have some bugs but this is the basic idea. 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>