I am trying to loop through four levels with ng-repeat, but ng-repeat fails after the third level.
How can I use ng-repeat for multiple repeats?
<tbody ng-repeat="company in companies">
<tr>
<td>{{company.name}}</td>
</tr>
<tr ng-repeat-start="child in company.Children">
<td>{{child.name}}</td>
</tr>
<tr ng-repeat-start="child2 in child.Children">
<td>{{child2.name}}</td>
</tr>
<tr ng-repeat-end ng-repeat="child3 in child2.Children">
<td>{{child3.name}}</td>
</tr>
<tr ng-repeat-end></tr>
</tbody>
I tried to end both loops like this:
<tr ng-repeat-end></tr>
<tr ng-repeat-end></tr>
However, Angular doesn't check that two loops have to be closed. You can only close one loop and that's my problem.
Your code works totally fine for me, as you can see in this plunker. But errors occured when I tried to use an old angular versions (before v1.2). I did not need to change your code to
<tr ng-repeat-end></tr>
<tr ng-repeat-end></tr>
Related
I have some nested ng-repeat. Something like this
<tr ng-repeat="phase in vm.phases track by phase.id">
<td>{{phase.name}}</td>
<table>
<tbody>
<tr ng-repeat="task in getTasksByPhaseId(phase.id)">
<td>{{task.name}}</td>
</tr>
</tbody>
</table>
</tr>
phase.id in the 2nd ng-repeat is showing up as undefined. How do I evaluate the variable in the ng-repeat?
make sure getTasksByPhaseId function of your controller is accessible here
I am having trouble trying to present data from an api. The data comes in a json response organized like this API from Guild Wars for character data
I made an angularJS request and used a series of nested ng-repeats to present the data, but the innermost loop , the inventory data , isn't being present properly. Only some of it is being iterated.
This is my code :
<table>
<tr ng-repeat="char in $ctrl.chars | orderBy:'-age'">
<td>
<table id="charTotal">
<ng-include src="'charBasic.html'"></ng-include>
<ng-include src="'charBags.html'"></ng-include>
</table>
</td>
</tr>
</table>
Forgot to include charBasic.html :
<tr>
<td>
<table id="charBasic" class="charBasic">
<tr>
<td>{{char.name}}</td>
<td>{{char.race}}</td>
<td>{{char.profession}}</td>
<td>{{char.level}}</td>
<td>{{char.deaths}}</td>
<td>
<table>
<tr ng-repeat="craft in char.crafting">
<td>{{craft.discipline}}</td>
<td>{{craft.rating}}</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
charBags.html :
<tr>
<td>
<table id="charBags" class="charBags" border="1">
<tr ng-repeat="bag in char.bags">
<td>{{bag.id}}</td>
<td>{{bag.size}}</td>
<td ng-repeat="inv in bag.inventory"><ng-if "{{inv}}">{{inv.id}}</ng-if></td>
</tr>
</table>
</td>
</tr>
As it is, not all inventory arrays are iterated, and the results vary each time
What would be the correct way to iterate this data ?
I found out the problem, it was a duplicate item issue :(
I "solved" it by using track-by $index option inside ng-repeat, which will bypass the problem of duplicate ids.
$scope.values = [1,2,3,4,5,6,7]
How do I generate below html from the above data in the below format, using angular js. using ng-repeat etc..
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td></td>
</tr>
</table>
This is one method:
JS:
$scope.values = [1,2,3,4,5,6,7];
HTML:
<table>
<tr ng-repeat="value in values" ng-if="$index % 2 == 0">
<td>{{values[$index]}}</td>
<td>{{values[$index+1]}}</td>
</tr>
</table>
Because the values is odd, the last will be empty. If you'd prefer to only output one TD when the values are odd you can simply add a ng-if to the TDs so that they are not displayed if they have no value.
Though, I would personally restructure the data before it gets to the view. Break the values apart into rows and then loop through the data set to get the rows, and then loop through the rows to get the individual values.
Far more information and options can be found (on SO already) here: How would I use AngularJS ng-repeat with Twitter Bootstrap's scaffolding?
The following table row is typical.
<tr ng-repeat="item in items">
<td>{{item.id}}</td>
<td>{{item.subject}}</td>
<td>{{item.author}}</td>
<td>{{item.date}}</td>
</tr>
but, how to repeat two rows to each?
<tr ??>
<td rowspan=2>{{item.id}}</td>
<td colspan=2>{{item.subject}}</td>
</tr>
<tr ??>
<td>{{item.author}}</td>
<td>{{item.date}}</td>
</tr>
If you're using AngularJS 1.2+, you can use ng-repeat-start and ng-repeat-end:
<tr ng-repeat-start="item in items">
<td rowspan=2>{{item.id}}</td>
<td colspan=2>{{item.subject}}</td>
</tr>
<tr ng-repeat-end>
<td>{{item.author}}</td>
<td>{{item.date}}</td>
</tr>
See "Special repeat start and end points" in the ngRepeat docs.
Otherwise, you have to resort to some nasty tricks, like wrapping the trs in a tbody element and repeating that.
I am having an issue i need to repeat the following.. as a group
<tr></tr>
<tr></tr>
I can't surround them with a DIV on put the ng-repeat on there as its invalid for TR i.e.
<div ng-repeat="item in items">
<tr></tr>
<tr></tr>
</div>
so i currently have the following implemented
<tr ng-repeat.....></tr>
<tr ng-repeat.....></tr>
but the problem is with this there is a collection of 6 items so the first TR renders 6 times and then 6 times for next ...
I am scratching my head trying to get around this but I just can't figure it out.
It would be nice if there was some sort of Div tag that was used for ng-repeat but didn't render an element to the DOM ??
It looks like the angularjs guys have implemented something along these lines. https://github.com/angular/angular.js/commit/e46100f7097d9a8f174bdb9e15d4c6098395c3f2
So the syntax would be
<tr ng-repeat-start="item in items"></tr>
<tr ng-repeat-end></tr>
You can put the ng-repeat on a tbody element :
<tbody ng-repeat="item in items">
<tr>
<td>{{item.row_one_stuff}}</td>
<td>{{item.more_row_one_stuff}}</td>
</tr>
<tr>
<td>{{item.row_two_stuff}}</td>
<td>{{item.more_row_two_stuff}}</td>
</tr>
</tbody>
<tr ng-repeat-start="item in items">
<td>{{item.data1}}</td>
</tr>
<tr ng-repeat-end>
<td>{{item.data2}}</td>
</tr>