ng-repeat duplicated on item change - javascript

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

Related

ng-repeat inside ng-repeat not working in angularjs app

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

How to delete dynamic data binded inside html elements after some event completion in angularjs

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.

ng-repeat + Filter + ng-switch

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

AngularJS ng-repeat through json array doesnt work in second array

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>

Angular JS repeater + Bootstrap Carousel

I'm trying to fill a Bootstrap Carousel component with data from AngularJS.
Basically I'm filling the items inside carousel-inner class like this:
<div class="carousel-inner">
<div class="item" ng-repeat="screen in app.screens">
<img ng-src="screens/{{screen}}" class="center"/>
</div>
</div>
Which would work fine, but at first I cannot see any picture, I think it's because none of my items has the active class.
In the official documentation:
<div class="carousel-inner">
<div class="active item">…</div>
<div class="item">…</div>
<div class="item">…</div>
</div>
The first div has "active" class, and it is visible, and when I try to write my example without Angular JS like above, it works.
How can I set the first item from ng-repeat to have the "active" class?
Use the following:
<div class="item" ng-repeat="screen in app.screens" ng-class="{active : $first}">
Here you can see which properties are exposed on the local scope.

Categories