I want to get current iteration number using track by. I have some array which is one elemented and has only one element at index=2.
If i dont use track by i get error. How to get current iteration?
<div ng-repeat="tableData in tables track by $index">{{current_iteration}}</div>
Using your existing :
<div ng-repeat="tableData in tables track by $index">
{{ $index }}
</div>
Will result in:
0
1
2
4
5
.....
Related
I am sorry if my question is not clear enough. I am just extracting a part of the json object which has two separate objects with two different names. Each of them has an array of objects with some data. One of the variable in the object is months which is a number.
I want to print them as 6-11 and 12-23 if 6 and 12 are the months in zero indexed object and 12 is the months in 1st indexed object. Here is the html code.
<td class="label">
<span ng-if="row.id=="ABC">{{tier.months}} -
{{row.tiers[$index+1].months-1}} </span>
<span ng-if="row.id=="XYZ">{{tier.months}} </span>
</td>
But this is giving me the last element as 60 - -1 instead of 60.
I tried
<span ng-if="row.id=="'ABC' && ($index == parseInt(row.tiers.length-1))">
{{tier.months}} - {{row.tiers[$index+1].months-1}} </span>
It didn't work.
Any suggestions would be highly appreciated.
Like $index, AngularJS also exposes $last inside the ng-repeat. Its value is true if the current item in iteration is the last item in the array otherwise it is false. Try to use it instead.
You can use ng-repeat-start and ng-repeat-end and can access $index in ng-repeat-end. Hope that help you.
Knowing that ng-repeat create a scope, how do I access the $index of a parent ng-repeat from a child ng-repeat?
Markup
<div ng-repeat="first in arr">
here there is the first level $index
<div ng-repeat="second in first.arr">
in here I need access to the first level $index
</div>
</div>
Whenever ng-repeat iterate to create a DOM, it also does create a DOM, with new scope which prototypically inherited from the current running scope.
As you wanted to access the ng-repeat $index of outer ng-repeat in inner ng-repeat, you could use $parent.$index to indicate parent ng-repeat
<div ng-repeat="first in arr">
here there is the first level $index
<div ng-repeat="second in first.arr">
in here I need access to the first level {{$parent.$index}}
</div>
</div>
Though the cleaner solution to solve this problem would be, use ng-init on outer ng-repeat and have outer index in scope variable, by which you can get rid of $parent keyword.
<div ng-repeat="first in arr" ng-init="parentIndex=$index">
here there is the first level $index
<div ng-repeat="second in first.arr">
in here I need access to the first level {{parentIndex}}
</div>
</div>
<div ng-repeat="first in [1,2,3]">
here there is the first level {{$index}}
<div ng-repeat="second in ['a', 'b', 'c']">
in here I need access to the first level {{$parent.$index}} / {{$index}}
</div>
Output:
here there is the first level 0
in here I need access to the first level 0 / 0
in here I need access to the first level 0 / 1
in here I need access to the first level 0 / 2
here there is the first level 1
in here I need access to the first level 1 / 0
in here I need access to the first level 1 / 1
in here I need access to the first level 1 / 2
here there is the first level 2
in here I need access to the first level 2 / 0
in here I need access to the first level 2 / 1
in here I need access to the first level 2 / 2
I am currently working on an analytics backend web app and am using ng-repeat to show a table for some data I am working with. Is there a way to show the number of total results found when using a filter with ng-repeat? I would like to display this beneath my table.
You can retrieve the filtered data in a var like this :
<div ng-repeat="product in filteredProducts = (products | filter:search)">
So inside your ng-repeat you can do something like filteredProducts.length
You can use the $last variable of ngRepeat
something like this inside your ng-repeat would do the trick:
<div ng-if="$last"> Total results found: {{ $index + 1 }} </div>
note that you should add 1 to the $index since it starts at 0
I have a number of li items which I want evenly distributed across 3 different columns. So I need the 1st third of the list items to be shown in the first ul, the next third in the 2nd ul etc.
Right know my approach is somewhat static:
<ul class="small-12 medium-4 columns">
<li ng-repeat="skill in skills.development | slice:0:10">
{{ skill.name }}
</li>
</ul>
<ul class="small-12 medium-4 columns">
<li ng-repeat="skill in skills.development | slice:10:21">
{{ skill.name }}
</li>
</ul>
<ul class="small-12 medium-4 columns">
<li ng-repeat="skill in skills.development | slice:21:32">
{{ skill.name }}
</li>
</ul>
I create the 3 rows in my template and then I created a custom filter that slices the list so I can obtain the first 11 elements, the next 11 elements and so forth. Problem is that the number of rows in each ul is not assigned dynamically like so:
Math.ceil(skills.development.length / 3)
So if I have more elements I will have to manually change the number of rows. Filtering is an issue as well. Imagine that I search for a word with 5 matches in first column and one in the 2nd column. Then I would have completely uneven column sizes. The length should be recalculated dynamically when I filter the list.
Ideally not only the number of rows in a column is calculated dynamically, but also the number of columns. So if there are more than say 15 elements it should render three columns, but if there is only 10 elements 2 columns will look better (as there is only 5 elements in each). And if there are less than 5 elements only one column will be rendered.
I figured that I should either try to solve it in the view or make some sort of helper function similar to the custom filter function I already wrote. But how might I do that?
Create a columns array with start and end values for each column and use a nested repeater to loop through all the data and render properly.
<ul ng-repeat="column in columns" class="small-12 medium-4 columns">
<li ng-repeat="skill in skills | slice:column.start:column.end">
{{ skill }}
</li>
</ul>
Full plnkr here: http://plnkr.co/edit/AMWLvB045UJmNamp8vdz?p=preview
I have an array of objects that have a "Category" property. In my ng-repeat, I am creating a group by conditionally showing a header row with the category name if it is different that the previous value by using items[$index - 1] to check the previous value. This works, but if I apply an orderBy filter, it would seem that $index doesn't reflect the new order. What am I doing wrong?
As soon as I posted this, I realized what might fix it. I added track by item.itemId and it started acting as expected.
<div class="row" ng-repeat="item in items track by item.itemId | filter: searchTerms | orderBy:['Category1', 'Category2']">
<div class="rowHeader" ng-show="$index == 0 || item.Category1 != items[$index -1].Category1">
{{item.Category1}}
</div>
</div>