i need different classes to be used for each iteration, following code.
Edit: the index is within the li
<li class="table-view-cell bg_{{$index}}" ng-repeat="agenda in agendas">
<span class="cell">
<a data-href="#/agendas/{{agenda.id}}" ng-click="detail($event, agenda.id)">
<span class="type">{{agenda.date}}</span>
</a>
</span>
</li>
also Why do we need ng-class, could I not use simple class here?
Try to replace ng-classs with just class, and add track by $index in your ng-repeat.
Or skip track by. Not sure what you are trying to do but, this should get you going:
http://jsfiddle.net/clto/HB7LU/8072/
what about using css pseudo-class nth-child.
you can apply different css for each child by their index in your css, instead of just creating lots of different class names for each index.
Related
I want to populate a BootStrap dropdown using ngRepeat. I can populate the items just fine but what if I want to have one header per iteration?
<ul class="dropdown-menu">
<li class="dropdown-header">Dropdown header 1</li>
<li ng-repeat="order in orders">{{order.name}}</li>
</ul>
With this I can get only one header understandably.
Use ngRepeatStart and ngRepeatEnd
<li ng-repeat-start="order in orders" class="dropdown-header">Dropdown header {{$index}}</li>
<li ng-repeat-end="order in orders">{{order.name}}</li>
You can use ng-repeat-start and ng-repeat-end.
<ul class="dropdown-menu">
<li ng-repeat-start="order in orders" class="dropdown-header">Dropdown header {{$index}}</li>
<li ng-repeat-end>{{order.name}}</li>
</ul>
You also don't have to write: ng-repeat-end='order in orders'. you can just mention ng-repeat-end
Read more about it here: ng-repeat start and end
You didn't specify, but I assume you're using the jQuery library that goes along with it. I would highly suggest using Angular UI Bootstrap instead. They've taken care of this for you. I'm sure there are other components you'd like to use as well.
https://angular-ui.github.io/bootstrap/#/dropdown
Update I now realize I misunderstood your question, but I would still take a look at the Angular UI Boostrap library if you're not using it already.
In ui-sref, i need to add two states like ui-sref="form.profile.retail and form.profile.corporate" , i am not sure how to do this, i have tried using conditional operator but didnt work.
In form.html
<a ui-sref-active="active" ui-sref="form.profile.retail"><span>2</span> Login</a>
Here is the Plunker
Thanks
You can use ng-switch to determine what link to place, I cannot understand your conditional needs so I'll place only an example.
Assign a scope variable like isRetail to define when the link should be one or another:
<div ng-switch on="isRetail">
<a ui-sref-active="active" ui-sref="form.profile.retail" ng-switch-when="true">Retail</a>
<a ui-sref-active="active" ui-sref="form.profile.corporate" ng-switch-default>Corporate</a>
</div>
Try this :
ui-sref="form({retail: form.profile.retail, corporate: form.profile.corporate})"
You can see this exmaple where multiple params are being passed :
http://plnkr.co/edit/r2JhV4PcYpKJdBCwHIWS?p=preview
<div ng-repeat="blub in filtered = (blubs | filter:tag)">
<span ng-repeat="tag in blub.tags" class="tag-box">{{tag}}</span>
</div>
How can I unnest it into one query. I imagined it like this:
<span ng-repeat="tag in blub.tags in filtered = (blubs | filter: tag)>{{tag}}</span>
Object blub has more than one tag, there are more than one blub objects.
EDIT:
Plunker:
http://plnkr.co/edit/mWjyryOsV5zZJisZzV3D
GOAL: Reduce 2 times ng-repeat into one ng-repeat which shows the same tags.
In that situation I would recommend you first to create one collection instead of doing double looping.
<span ng-repeat="tag in getBlupList(filtered)" class="tag-box">{{tag}}</span>
Where getBlupList(filtered) are JS method. Some kind of reducer that creates one list instead of what you have.
I dont know how your collection look like but personally for me for such situation the best solution is to use Underscore.js lib. ".flatten()" or ".pluck()"
I have a huge JSON object tree with two levels. First level has around 500 elements, and each element contains an average of 100 child elements.
I want to display the first level of the tree and I am doing it with a simple ng-repeat. When the user clicks on the element I want to display the child elements of that element. If I use a span ng-switch or a ng-show to show/hide child elements when the page first renders it freezes for around 10 seconds while generating all the HTML.
It doesn't sound like the right solution. There must be a different way of doing it, but I can't figure out. Anyone knows?
I have explained most in my comment, and here is a working plunker:
http://plunker.co/edit/RSZwfLlsCJ68MUkACbdp?p=preview
the new ng-if directive will do what you want
<h1>ng-if</h1> <h5>Click on the level to expand</h5>
<div class="well">
<ul class="nav nav-list" ng-repeat="(attr,element) in tree">
<li ng-click="expand=!expand" ng-class="{'active':expand}"><a>{{element.name}}</a></li>
<ul ng-if="expand" class="nav nav-list">
<li ng-repeat="item in element.items">{{item.name}}</li>
</ul>
</ul>
</div>
you can also do this in the "old-way" with ng-show using new ternary operator or its alternative expr && if_true || if_false
<h1>old-way</h1> <h5>Click on the level to expand</h5>
<small>use ternary operator or <pre>expand && element.items || []</pre></small>
<div class="well">
<ul class="nav nav-list" ng-repeat="(attr,element) in tree">
<li ng-click="expand=!expand" ng-class="{'active':expand}"><a>{{element.name}}</a></li>
<ul ng-show="expand" class="nav nav-list">
<li ng-repeat="item in (expand ? element.items : [])">{{item.name}}</li>
<!--<li ng-repeat="item in (expand && element.items || [])">{{item.name}}</li>-->
</ul>
</ul>
</div>
See this answer on ng-repeat performance. Essentially, it just takes a long time since Angular's ng-repeat, and basically all other directives, are set up to always look for updates in the whole JSON structure. So if you have lots of data and don't need live updates in the HTML view when changing the JSON, I wouldn't recommend using AngularJS. Generally, AngularJS performance also depends a lot on the browser and its JavaScript engine.
Alternatively, you could divide your JSON into subparts and then use pagination to display it.
I would recommend to fetch the data gradually from the server. Use server-side pagination and retrieve only the fields that you are going to display. Then, when a user clicks on one of the first level items, you can do another XHR to the server with the new data. I had similar requirements for a project and that solved the latency issue.
Regards,
Agustin.
The Angular docs are really sparse on what is acceptable in an "expression" within a conditional ng-class.
For example, I'm running an ng-repeat over a list:
<ul class="clothes">
<li ng-repeat="piece in clothes | filter:query">
{{piece.name}}
</li>
</ul>
On every third <li> element I'd like to add a class of "third". Can this be done using ng-class with something like ng-class="{third : li:nth-child(3)}" or similar?
Side-note, is there a general reference somewhere that defines and gives examples of what can be used in an Angular expression? There's some really basic stuff that I can do with vanilla Javascript/css but I can't work out how to cram it into Angular!
Just create an expression that evaluates to true or false, a bit similar to Javascript expressions but with some differences, you can read about it here.
<ul>
<li ng-repeat="item in items" ng-class="{third: !(($index+1)%3) && !$first }">{{item}}</li>
</ul>
Here is a jsBin.
In my code I am telling ng-class to add the class 'third' when ($index+1)%3 is zero and it is not the $first list item ($index, $first and $last are created by ng-repeat).
if you want to use css instead of angular for the styling, you can use the css nth selector
http://www.w3schools.com/cssref/sel_nth-child.asp
li:nth-child(3n+3)
{
background:#ff0000;
}