Is there a way I can get ng-repeat current record index? I am trying to give each record div an id equal to the record index example:
<div id="1">
<div id="2">
<div id="3">
Any example is highly apreciated.
The ng-repeat i am using is as follows:
<div ng-repeat="rows in clients.Result">
Use $index with evaluation curls:
<div id="{{$index}}" ng-repeat="rows in clients.Result">
PLNKR
$index contains the current index. So you can use it inside your ng-repeat like {{$index}}.
All these variables are documented at the very top of the ng-repeat documentation.
Related
Is it possible to have more than one ng-repeat on the same element (i.e. not nested)?
Like so:
<section ng-repeat="clusterA in foo.barA.clusters" ng-repeat="clusterB in foo.barB.clusters">
I want to use an ng-if to display clusterA and clusterB in the same row if they have the same name. Conceptually it would look something like this fiddle.
You could ng-repeat over clusterA and use $index to check the same record in clusterB.
Something like:
<section ng-repeat="clusterA in foo.barA.clusters">
<span class="col-md-6">clusterA</span>
<span ng-if="clusterA == foo.barB.clusters[$index]" class="col-md-6">foo.barB.clusters[$index]</span>
</section>
I want to implement a pagination into my large ng-repeat, because the rendering of 200 objects is to slow.
I want to use the bootstrap-ui pagination.
Based on the selected page I will calculate which object will be displayed.
But in my ng-repeat i have no index. So my initial plan doesn't work. for example:
<div ng-if="index >= min && index <= max">
... show this object...
</div>
Can someone help me how to solve this problem?
thank you!
Angularjs provides $index on local scope of each template instance - iterator offset of the repeated element (0..length-1). https://docs.angularjs.org/api/ng/directive/ngRepeat
<div ng-repeat="(key, value) in myObj">
<div ng-if="$index >= min && $index <= max">
... show this object...
</div>
</div>
I can't seem to make my multiple dropdowns to work.
<div ng-repeat="i in [0,1,2,3,4] track by $index">
<select ng-model="myArray[i]" ng-options="someList"></select>
</div>
In the html the result is ... ng-model="myArray[i] instead of ng-model="myArray[0] etc.
I have tried curly brackets but it doesn't work. closest thing was ng-model="myArray['{{ i }}'] but that' not really what I want.
Edit: Here is a fiddle to illustrate.
http://jsfiddle.net/dpkzzyug/1/
You need to examine the HTML to see that the result literally writes out i (or $index in this case) instead of the value.
The code that you have works, but the problem is that myArray is local to the ng-repeat scope. You need to make sure that myArray exists outside of this scope.
Something like the following will work:
<div ng-app ng-init="someList=[1,2,3]; myArray = []">
<div ng-repeat="i in [0,1,2,3,4] track by $index">
<select ng-model="myArray[i]" ng-options="i for i in someList"></select>
http://jsfiddle.net/778x0pm0/1/
I would personally prefer to use the controller as syntax since this makes this a little clearer:
<div ng-app=app ng-init="someList=[1,2,3]">
<div ng-controller="ctrl as ctrl">
<div ng-repeat="i in [0,1,2,3,4] track by $index">
<select ng-model="ctrl.myArray[i]" ng-options="i for i in someList"></select>
http://jsfiddle.net/778x0pm0/
I just realized that the html will write out i / $index even though the logics of angular still work. I was having problems elsewhere and thought it was because of this.
I need to repeat over either a collection or an array, depending on the situation.
How Would I do that, provided the following approach causes "ngRepeat: dupes", code snippet as follows:
<div ng-if="cause.length" ng-repeat="k in cause">
{{k}}
</div>
<div ng-if="!cause.length" ng-repeat="(k,v) in cause">
{{k}}
</div>
add track by $index to end of ng-repeat declaration any you will not get any Dupes error...
<div ng-if="cause.length" ng-repeat="k in cause track by $index">
{{k}}
</div>
<div ng-if="!cause.length" ng-repeat="(k,v) in cause track by $index">
{{k}}
</div>
UPDATE
If no tracking function is specified the ng-repeat associates elements by identity in the collection. It is an error to have more than one tracking function to resolve to the same key. (This would mean that two distinct objects are mapped to the same DOM element, which is not possible.)
and this explanation from angularjs documentation explains why it resolve this error...
I'm just starting out with angular. I currently have an json array of products being displayed within an ng-repeat and am looking to add a class to every third product.
Is there a way to write a condition within the repeater that will add a class to the html element when the index%3 is 2
Thanks
Sure!
<div ng-repeat='item in items' ng-class='{third: $index%3==2}'>{{item}}</div>
http://plnkr.co/edit/24Ne1Cyh71INYIKxBCcc
Yes, use the ng-class directive:
<div ng-repeat="item in items" ng-class="{ 'third-elm': $index%3 == 2 }">{{item.value}}</div>
jsFiddle: http://jsfiddle.net/bmleite/dKjz5/