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
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>