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.
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>
When I load a page to display items prices, before the prices are calculated in the controller the page displays "null" in the price for a while (maybe 1 sec). How can I avoid this? I thought this is the purpose of ng-init, is it right?
When I use it, I get my items initialized to 0. This is ok. However, when the value is calculated the price is not updated.
Example:
<div class="text-right custom_block_field" ng-show="booking.duration == 0" ng-init="itemSelected.convertedPrice = 0">{{(itemSelected.convertedPrice)}}</div>
ng-init is not for that, it is basically used to call a method or some initialization of the values
<div class="text-right custom_block_field"
ng-show="booking.duration == 0"
ng-bind="itemSelected.convertedPrice"></div>
Or use the ng-cloak with parent element
ng-cloack is the best way. It'll mask a value until it's ready.
<div ng-cloak>
//whatever your app code is
</div>
I've got a couple of sliders I want to pick from a menu.
As a consequence, I need to both pick the right slider and reset the first slide to 0.
I have a slide model I set to 0 fro the ng-click just before opening the popup, but, unfortunately, slide is not reset to 0.
Any idea?
PS: I don't want to move the slide variable to the scope of the controller.
<div ng-init="slide = 0"></div>
<div
ng-repeat="s in sliders"
style="left:{{s.center.x - 70}}px; top:{{s.center.y}}px"
ng-click="slide = 0; openPopover('#slides-{{s.name}}')"
>
{{s.displayName}}
</div>
As long as it's a valid angularjs/js expression it will work
http://plnkr.co/edit/wta6GcVZHVccVbCf08IT?p=preview
<body ng-controller="MainCtrl">
<p ng-click="set = 'Cowa'; to = 'bunga!'; popup('test')">Hello {{name}}!{{set}}{{to}}</p>
</body>
As ng-repeat creates it's own scope, your current code will set slide to 0 inside these scopes. A quick (and maybe dirty) way is to use $parent to directly reference the parent-scope. E.g:
ng-click="$parent.slide = 0; openPopover('#slides-{{s.name}}')"
I am Using angular-deckgrid to create pinterest like view
Here is the Code I have written
<div deckgrid source="items" class="deckgrid">
<span data-ng-repeat='i in card'>{{ i }}</span>
</div>
I am expecting the value of i in the ng-repeat, but that seems to be not going in the loop.
Can any one please suggest me the solution
The data-ng-repeat is redundant. Be default, deckgrid will loop over your items variable and assumes it is an array.
Make sure items is an array and remove the data-ng-repeat.
I'm having a bit of trouble trying to use an ng-repeat that only references the previously clicked ng-click function.
What I'm trying to create is a demo app with dynamic dummy content.
The concept is:
Click a link from a content set and display the json data (headlines) just pertaining to that link.
I've noted the problematic repeater in the html
demo: plnkr.co
I'm kinda new to angular so if there is an easier method to doing this, any guidance would be greatly appreciated. Thank you!!
Your second block contains two nested ng-repeats: one that iterates over the contentSets, and one that iterate over the headlines of the current content. You want a single ng-repeat, which iterates over the content that has been clicked in the top block. And this clicked content is stored in the scope variable useContent by your setContent() function (called by the ng-click). So that's what you must iterate over:
<ul class="list-unstyled" >
<li ng-repeat="headline in useContent.headlines">
{{headline.headline}}
</li>
</ul>
You got it right for the <h1>, which displayed the appropriate title, BTW.
Demo: http://plnkr.co/edit/guAapCDRzPI1i51OfRAS?p=preview
Demo Plunker Here
You only need to put ng-show on the ul element, and only show it when content == useContent
<ul class="list-unstyled" ng-repeat="content in contentSets" ng-show="content == useContent">
<li ng-repeat="headline in content.headlines">
{{headline.headline}}</li>
</ul>