Currently, I have functional code that successfully passes data from a dialog window to a table. Everything works fine for a single row, but when I try to add multiple rows to the table, I get results for several columns simultaneously. Is there a way to obtain a result for a single cell without repetition when using the AngularJS 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 relevant code can be found on the plunker