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
Related
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.
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>
I'm not sure how to do this in angular, after coming from jquery.
I have a table:
<div class="col-xs-10">
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</thead>
<tbody ng-repeat="val in data">
<tr>
<td>val.Time</td>
<td>val.Distance</td>
<td ng-click="callmethod()"><img src="delete"></td>
</tr>
</tbody>
</table>
</div>
Essentially I want the callmethod() to know which row is being clicked so that I can make a update in the model in my controller. What is the right way to do this?
You can use the $index property:
callmethod($index)
Then on your controller you would do something like:
function callmethod(index) {
var foo = $scope.data[index];
}
Change that ng-click to this:
<td ng-click="callmethod(val)"><img src="delete"></td>
You'll get the whole val object when that method gets called.
I have an ng-repeat within a ng-repeat. I am tyring to obtain the index at both levels but am not able to :
<tbody>
<tr ng-repeat="element in body">
<td ng-repeat="h in header" style="width:{{h.width}}px">
<div col="{{$parent.$parent.$index}}" row="{{$parent.$index}}">{{element[h.column]}}</div>
<td>
</tr>
</tbody>
here is a plnkr too.
http://plnkr.co/edit/dGoN43HzQefVpCsp2R3j
The ISSUE is that value of "col" never gets populated. It does not capture the index.
Can anyone assist
You do not have to use $parent, just use $index to get index of inner loop and use indexOf() function of array to get index of outer loop...
HTML
<tr ng-repeat="element in body">
<td ng-repeat="h in header" style="width:{{h.width}}px">
<div col="{{body.indexOf(element)}}" row="{{$index}}">{{element[h.column]}}</div>
<td>
</tr>
UPDATE
Actually using ng-init would much better to get index of outer loop... here you can easily set rowIndex to current index at every turn and use it in inner loop...
<tbody>
<tr ng-repeat="element in body" ng-init="rowIndex = $index">
<td ng-repeat="h in header" style="width:{{h.width}}px">
<div col="{{$index}}" row="{{rowIndex}}">{{element[h.column]}}</div>
<td>
</tr>
</tbody>
here is updated PLUNKER
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>