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/
Related
i have the following ng-repeat code:
<div ng-repeat="item in items">{{item}}</div>
is there a way to programatically get into a javascript variable the 'final' html output of each of the repeated items instead of rendering it on the page?
hope that's clear enough.
I'm developing a mobile application using Ionic Framework based an AngularJS.
On one directive I'm looping over a JSON Array with ng-repeat applying a condition with ng-if, see below:
<ion-content class="has-header has-subheader" >
<ion-slide-box">
<ion-slide
ng-if="invocation.title_id == titleid"
ng-repeat="invocation in invocations" >
<h3>{{invocation.id}}</h3>
<div ><h1>{{invocation.invocation_frensh }}</h1></div>
<div ><h1>{{invocation.invocation_ar}}</h1></div>
<div ><h1>{{invocation.invocation_franko}}</h1></div>
<div ><h1>{{invocation.comments_fr}}</h1></div>
<div ><h1>{{invocation.comments_ar}}</h1></div>
</content>
</ion-slide>
</ion-slide-box>
<p>{{invocation.id}}</p>
</ion-content>
The point is that on the last p nothing is shown.
I understand that the $scope is not the same but on the last "p" or any other component outside the ng-repeat I need to have the same data in order to interact with it.
For exemple I want to add a button on a footer that gets the "{{invocation.id}}". If invocation.id equals 3 inside the ng-repeat "h3" I want to have it equals 3 in the "p"
How can i do it ?
Thanks for you help
Edit: In fact I want invocations[index].id in the 'p' outside of the loop, where index equals the displayed slide.
the invocation variable dies when the ng-repeat ends, if you need to use it again, you will need another ng-repeat
Assuming that you want to show only one slide at a time, you could do it without ng-if, and use filter instead.
<ion-slide ng-repeat="invocation in displayedInvocations = (invocations | filter:{title_id: title_id}:true)">
and then at outside:
<p>{{displayedInvocations[0].id}}</p>
Hope this helps.
I have code like this:
<my-dropdown>
<li ng-repeat="item in items"><a>{{item.text}}</a></li>
</my-dropdown>
and I need to hide all li except one (I have ng-transclude in 2 places) but I can't access the source html, I can't modify the code before angular will read it and I can't access DOM after ng-repeat.
One way to do it:
<my-dropdown>
<li ng-repeat="item in items" ng-hide="$index!=2"><a>{{item.text}}</a></li>
</my-dropdown>
Will hide all but the third li
I have an outer div that I want to repeat for each cats in art.Categories.
While that repeat loop happens, I want to take the value from the ng-repeat and use it to create a nested ng-repeat. This nested ng-repeat will continue until it runs out of items, then return to the outside ng-repeat, which will continue the process.
My issue is I can't use {{cats.id}} as the filter for the sub-Div.
<div ng-repeat="cats in art.Categories" class="tab-pane" ng-class="{active: $index == 0}" id="{{cats.id}}">
<div ng-repeat="arts in art.Articles | filter: { ids: '{{cats.id}}' }" class="entity_container"></div>
</div>
As the commenter mentioned, a solution is to remove the curly braces. In my example, that means just writing cats.id. As an aside, I need to implement UI's native tabs directives.
Try this:
ng-show="arts.ids==cats.id"
I would like to tile elements that get in to ng-repeat (set up their css based on the filtered list)
Ideally I would like to use html markup like this:
<ul>
<li ng-repeat="row in rows">
<h6>{{row.name}}</h6>
<ul>
<li ng-repeat="item in items|filter:row" tile>{{ item.name }}</li>
</ul>
</li>
</ul>
Is it possible for me to access the list that is being passed to ng-repeat? (any other way than AngularJS - how to get an ngRepeat filtered result reference)
Can I somehow transclude the items, so the tile directive would actually apply css (I want to abstract ng-style="{top:getTop(item),left:getLeft(item)}" etc.)
Is it possible for me to access the list that is being passed to ng-repeat? (any other way than AngularJS - how to get an ngRepeat filtered result reference)
I think you'll need to do what you saw in the link you referenced:
ng-repeat="item in (filteredItems = (items|filter:row))" tile>
Assuming your tile directive does not create a new scope, it will share the scope that ng-repeat creates (one scope per item). So the filteredItems property will be available to your directive.
Can I somehow transclude the items, so the tile directive would actually apply CSS (I want to abstract ng-style="{top:getTop(item),left:getLeft(item)}" etc.)
Your tile directive has access to the li element on which it is defined. So you can simply call, e.g., element.addClass(...).