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.
Related
I'm iterating (ng-repeat) over a childArray of an existing loop with ng-repeat, but I want blank results to show on my child ng-repeat. Is there any way to do that? I have an element structure I want to be shown from the child ng-repeat.
The code looks like this :
<ng-repeat="row in parentArray"> <--- the parent array
{{row.name}}
{{row.date}}
{{row.place}}
<ng-repeat="option in row"> <--- the child array
Result : {{option.name}} <-- I still want result to show up
</ng-repeat>
</ng-repeat>
If i understand you correctly, you wanna show something if there is no option?
ng-repeat only works with data. When there is no data, nothing is displayed. For this purpose you can use ng-if or ng-show / ng-hide
Also it is very unclear for me at the moment, where the options are stored in the row
HTML
<ng-repeat="row in parentArray"> <--- the parent array
{{row.name}}
{{row.date}}
{{row.place}}
<div ng-if="row.options.length > 0">
<ng-repeat="option in row.options"> <--- the child array
Result : {{option.name}} <-- I still want result to show up
</div>
<div ng-if="row.options.length === 0">
<label>No Data</label>
</div>
</ng-repeat>
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'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 array of 3 items and want them to be "ng-repeated"
<li ng-repeat="item in obj.items id="testobj{{testobj.number}}">
</li>
When I look at the page, it appears that the id of the "li" is just "testobj" for all 3 items and not testobj1 testobj2 testobj3 like I was expecting. What is the issue?
Your ng-repeat attribute is missing a final ".
The {{ }} binding is probably coming back with no data and so being treated as if it was an empty string. I see no reference to testobj (the scope variable) anywhere outside of your binding. Is this defined, or should your id read id="testobj{{item.number}}" or something similar?