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

Question

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

Can you clarify what exactly are you asking? When you say, 'sole cell', what does that refer to? — Yftach, Apr 04 '18 at 14:13
It means that if I pass data in cell AAA - Jon that data must will pass in only that cell. Now data repeat in column. I think that need to apply the iterative method of the array from the inside here. — alexeyll, Apr 04 '18 at 15:18
Well yeah, what you are doing makes no sense. You are doing: for each user, display rows. Then you change those rows, because all users share the same data, everything changes. What you should be doing is: for each user, create an object with all the column names. And then display that object and not the tableRows. because table rows is not actually rows its columns while users are rows Is your question how to do a table in angular? — Yftach, Apr 04 '18 at 16:01
I need to iterate through the array so that the passed data from the dialog box is load to a specific cell of a particular user and not all at once in all column. I guess that I need rewrite data in array so to it work correctly. Here I need a help :) — alexeyll, Apr 04 '18 at 16:17

score 0 · Accepted Answer · edited Apr 04 '18 at 18:23

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>

Yes, it work. I corrected the code a bit and now all work correctly! An amended code here https://plnkr.co/edit/L4EV6pJEECQBmw0LVii0 Thanks! — alexeyll, Apr 04 '18 at 18:51

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

1 Answers1