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>
Related
In my ionic app, I want to show a cart. My problem is empty objects in my nested array.
My array look like this:
array [0:{id:0,
name:meal,
item:[0:{id:0,name:pizza0,count:1},
2:{id:2,name:pizza2,count:3}]}
1:{id:1,
name:meal,
item:[0:{id:0,name:drink0,count:1},
1:{id:1,name:drink1,count:5}]}
]
My html code look like this:
<div ng-repeat="cart in carts">
<ion-item class="item-stable">
<!-- breaking space-->
{{cart.name}}
</ion-item>
<ion-item class="item-accordion" ng-repeat="item in cart.item track by $index">
<ion-delete-button class="ion-minus-circled" ng-click="removeFromCart(item,cart.id)"></ion-delete-button>
{{item.count}}x {{item.name}} - {{item.length}}
<ion-item>
The result looks like this:
I try to hide the empty arrays with ng-if:
ng-if="cart.item.length > 0"
ng-if="item.name"
With the first, no item shows (probably because cart.item.length is undefined).
With the second all items are shown.
What am I doing wrong? Is there a better way to hide empty arrays?
You can use safe navigation operator with ngIf directive.
use ngIf in div tag like this:
*ng-If="item?"
This will only hide the empty items and only show items with data in it.
I just would like to know what exactly ng-repeat-start and ng-repeat-end are?
And why we should use them instead of ng-repeat?
I mean what is the point?
The point is that sometimes is better to repeat a series of elements instead of just one parent element.
In this case you can get repeat item looks like:
<div ng-repeat-start>ITEM HEADER</div>
CONTENT
<div ng-repeat-end>ITEM FOOTER</div>
instead of one root element:
<div ng-repeat>CONTENT</div>
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"
<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()"
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.