ng-repeat + Filter + ng-switch - javascript

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

Related

ng-repeat duplicated on item change

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

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.

Bootstrap grid alignment with Angular JS

I have been trying my hands with Bootstrap framework.
1.In the grid alignment when we have 4 columns to work with we use the below row as per w3 schools
<div class="row">
<div class="col-lg-3">
</div>
<div class="col-lg-3">
</div>
<div class="col-lg-3">
</div>
<div class="col-lg-3">
</div>
</div>
or two columns we divide the same by col-lg-6 and col-lg-6. What if,if I have some 5 column that I want to align? What value should I set to col-lg-* in 3 coloumns?
Also, What if, if I have a json file where I get the data from and I create columns run time? How do I handle that scenario here? For example I use Angular js to get the data and generate some list like the one in the example below,
<section class="row">
<ul>
<li class="col-lg-6">
<img class="profile-image img-circle av" width="70%" src="images/Crack.png" />
<p>Some text</p>
</li>
<li class="col-lg-6">
<img class="profile-image img-circle av" width="70%" src="images/Aad.png" />
<p>Some text</p>
</li>
<li class="col-lg-6">
<img class="profile-image img-circle av" width="70%" src="images/Aa.png" />
<p>Some text</p>
</li>
</ul>
</section>
How do you think i can use ng-repeat and segregate the columns accordingly? I really hope I am clear in my question. Please help.
As for your first question, there are a handful of solutions - check out this SO question for details, Five equal columns in twitter bootstrap
For the second part, I might try something like this :
<div class="row" ng-repeat="item in placeholders">
<div ng-class="col-md-{{12 / placeholders.length | parseInt}}">col-md- {{12 / placeholders.length | parseInt}}</div>
</div>
Placeholders would be you JSON - so it just looks at the length and then runs a simple parseInt filter over it. This is all happening in an ng-class. The filter looks like so -
myApp.filter('parseInt', function () {
return function (a, b) {
return (parseInt(a))
}
});
A fiddle - http://jsfiddle.net/780gku24/
It's important to note though - this is assuming you aren't going to have more than 12 items in the JSON. If this does not work for you leave me a comment!
You can add or remove an item to the data to see it in action.
Please try col-lg-4. it would divide columns equally.

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>

Categories