I'm trying to do a ng-repeat over a json array. I'm able to do the first iteration of 'event in calendar'. But I'd not have to manually iterate through each number.
This works:
<div ng-repeat="event in calendar">
{{event[0].custom_fields.location[0]}}
{{event[0].custom_fields.price[0]}}
{{event[1].custom_fields.location[0]}}
{{event[1].custom_fields.price[0]}}
{{event[2].custom_fields.location[0]}}
{{event[2].custom_fields.price[0]}}
</div>
I've tired doing two ng-repeats and it fails. How do I fix this?
<div ng-repeat="event in calendar">
<div ng-repeat="custom_fields in event.custom_fields">
{{custom_fields.location[0]}}
{{custom_fields.price[0]}}
</div>
</div>
According to your first example, event is the array, not the custom_fields property. Iterate it instead.
<div ng-repeat="events in calendar">
<div ng-repeat="event in events">
{{event.custom_fields.location[0]}}
{{event.custom_fields.price[0]}}
</div>
</div>
Related
I have an angular application with sets of array items "array_var". When I push new sets of array to array_var, I noticed that the ng-repeat in my html creates a duplicate ng-repeat.
everytime I push new array to the array_var there is also another duplicate ng-repeat created.
Sample ng-repeat:
<div ng-repeat="d in icons track by $index" class="icons-holder">
<div class="col-lg-12 col-md-12 col-sm-12 sub-category text-center" ng-hide="d.date == icons[$index-1].date">
<div class="searchTag-holder pad-left-25 pad-right-25 d-inline-b">
<ul>
<li class="searchTag">
{! d.date !}
</li>
</ul>
</div>
</div>
</div>
The repeated attribute is normal in this feature, you can see the example here:
https://www.w3schools.com/angular/tryit.asp?filename=try_ng_ng-repeat2 (Inspect element)
If you want to avoid that attribute you could repeat the element with pure javascript/typescript.
This link has more details: https://www.w3schools.com/angular/ng_ng-repeat.asp
I am using two ng repeats but the second one it doesnt display. Let me show you my view :
<div class="post" ng-repeat="user in users | orderBy:'username':false" ng-class-odd="'odd'" ng-class-even="'even'">
<p>{{user.username}}</p>
<small><a ng-click='gotomessages(user.username)' class="btn btn-default">go</a></small>
<small class="pull-right"> Message</small>
<div ng-repeat="message in messages[$index]">
<p>{{message.name}}</p>
</div>
</div>
the $index is the one of the first ng-repeat. Is it possible to use it like i did ? In anyway the second ng repeat doesnt work can you help
Just use $parent.messages[$index] instead of messages[$index] in the second ng-repeat
Hi , I am uploading documents along with some key word as you can see in the diagram.Here is the code for for inserting key words into the panel which is formed inside a div.
<div class="tagListForDocument col-xs-6 col-md-6">
<div class="panel panel-default">
<div class="panel-heading">{{'TAG.TagsForDocument' | translate}}</div>
<div class="panel-body btn-group-vertical" role="group" aria-label="available tags">
<button ng-repeat="tag in ul.tagsForDocuments" ng-click="ul.removeTag(tag)" class="btn btn-flat">
<span class="icon-remove"></span> {{tag.name}}
</button>
</div>
</div>
</div>
As you can see the keywords are formed ({{tag.name}}) based on iteration of ul.tagsForDocuments array.
Now my problem is that I want to remove all these keywords once the uploading is finished.That means before uploading second time the panel should be empty. But dont know the efficient way of doing this. How can I reload this particular part of html with empty ul.tagsForDocuments array.
In your controller you can do:
ul.tagsForDocuments = [];
which will make the array empty. Angular will then update the view accordingly.
I have the following ng-repeat that gets 3 items at a time:
<div ng-repeat="post in posts | filter:search | filter:customFilter">
<span ng-switch="" on="$index % 3">
<div class="row" ng-switch-when="0">
<div class="col-sm-4">
{{posts[(posts.indexOf(post))]}}
</div>
<div class="col-sm-4">
{{posts[(posts.indexOf(post + 1))]}}
</div>
<div class="col-sm-4">
{{posts[(posts.indexOf(post + 2))]}}
</div>
</div>
</span>
</div>
My problem is that if the search or customFilter apply to one post, I will get all three items even though the second and third ones don't apply.
PLNKR
In that PLNKR if you search for "1", you will get three items instead of just one.
Is there a way to filter one item at a time as opposed to all 3 at a time?
Store the filtered values in a variable like this
post in filteredPosts = (posts | filter:search | filter:customFilter)
the use the filteredPosts.length plus ng-show / ng-hide to hide the extra items
Edit: Apparently just using a filtered variable, and using it to get the posts in the {{}} (like filteredPosts[(filteredPosts.indexOf(post))]) works just fine.
Is this what you want? Plunker
I currently use v-repeat to get my objects.
Inside i have one more v-repeat, but this should only repeat once. Is this possible?
<div v-repeat="companies">
{{name}}
<div v-repeat="image: images"> // should only repeat once
{{image.name}}
</div>
</div>
If each company has many images and you only want the first image to show, here is a solution:
<div v-repeat="company in companies">
{{company.name}}
<img v-attr="src: company.images[0].url">
{{company.images[0].name}}
</div>
I am not entirely sure if this is what you are after, but here goes:
<div v-repeat="company: companies">
{{company.name}}
<div>
<img v-attr="src: company.image.url"/>
{{company.image.name}}
</div>
</div>
this is assuming there is one image per company