Using ng-repeat in filter - angularjs

I think popular question, but I don't found solution. Look e.g. I have object {title:..., book:.... author:...} and would like filter my view by title like below:
<div ng-repeat="product in main.products | filter: {{product.title}}">
<span>{{product.author}}</span>
</div>
In <span> author has shown, but filter not working.

If you get your filter value from server side, you can easily simulate it as:
$scope.by_title = '';
$timeout(function(){
$scope.by_title = 'on';
},3000);
and:
<tr ng-repeat="obj in objs | filter:{ title: by_title }">
DEMO PLUNKR

As you commented, you should use orderBy filter for this.
<div ng-repeat="product in main.products | orderBy: 'title'">

Related

How to sort the dynamic data generating from AngularJS filters?

I am trying to sort the shop titles in alphabetical order right now the data is showing randomly. I am adding the fiddle of that: https://jsfiddle.net/jtdk157s/
enter code here
User the filter OrderBy and specify the property of the Object:
ng-repeat="item in groupedData | filter:categoryFilter | orderBy:['node.location','node.title']
Check working sample:
https://jsfiddle.net/bLvLy1sh/1/
With groupBy filter
<div ng-repeat="(key, items) in groupedData | groupBy: 'node.location' )">
<h2>{{key}}</h2>
<ul>
<li ng-repeat="location in items">
{{ location}}
</li>
</ul>
</div>

How can I order by more than one element with an angular ng-repeat?

I know how to do a simple orderBy like this:
ng-repeat="test in tes.tests orderBy: 'modifiedDate'">
but how can I orderBy: title (Ascending) and then modifiedBy (most recent first?
You should use:
ng-repeat="test in tes.tests | orderBy:['+title','-modifiedDate']
Yes. You can.
<div ng-repeat="test in tes.tests | orderBy: ['title','-modifiedDate']"> {{title}} - {{modifiedDate}} </div>

Angular: filtering an ng-repeat with an array

I'd like to filter an ng-repeat by an array of items. I have tried something like this:
<tr ng-repeat="item in items | filter: filteredItems">
Where filteredItems is an array containing a subset of items. This doesn't seem to work. Is there another way this can work?
https://docs.angularjs.org/api/ng/filter/filter the second param(expression) should be string or object or function, this case use function better
<tr ng-repeat="item in items | filter: function(item){ return in_array(item,filteredItems);}">
Hope it works, please update your code with
<tr ng-repeat="item in filteredItems.items | filter: filteredItems.search">

Angularjs ng-repeat filter all data not just the filtered results

Hi I'm new in angularjs i just have question to ask.
this is my ng-repeat code.
<ul ng-repeat="todo in filteredData | filter:search">
And it seems that this code will only filter the filteredData not the alldata itself.
filteredData is always equal to 10 becuase i'am using a pagination in angularjs.
Now my question is there a way that i can filter alldata not just the filteredData?
i tried
<tr ng-repeat="todo in filteredData | filter:alldata:search">
but is dosen't work.
Thanks
The best way to do this is to create pagination as a filter.
Then your code will be
<tr ng-repeat="todo in alldata | filter:search | pagination:pageNum:perPage">
Pagination filter:
module.filter('pagination', function(){
return function(array, page, perPage){
return array.slice(page * perPage, (page+1) * perPage);
}
});
Full working codepen here: http://codepen.io/SimeonC/pen/gbpqNM?editors=101 (Excuse the jade and coffeescript - the eye above the editor shows you the compiled HTML/JS)
you can use something like this let assume your full data list is stored in
$scope.allData
then you can uses in your <li>
<li ng-repeat="todo in filterdData = (allData | filter:search)"> </li>

angular ng-repeat if property is defined

I'm trying to ng-repeat through an array, but need to hide if a property is undefined.
I tried doing to do is this:
<div ng-repeat="person in people | filter:search" ng-if="last == undefined">
{{person.last}}, {{person.first}}
</div>
Heres a basic jsfiddle of what I'm trying to do:
http://jsfiddle.net/HB7LU/4556/
Thank you!
<div ng-controller="MyCtrl">
<div ng-repeat="person in people | filter:search" ng-show="person.last">
{{person.last}}, {{person.first}}
</div>
Try testing for person.last instead of just 'last'.
I used ng-show instead of ng-if as well.
If you want to just hide the rows, then mccainz's answer will work. If you want to actually remove them from the DOM, then create a filter:
$scope.fullNameFilter = function(person){
return person.last;
};
HTML
<div ng-repeat="person in people | filter: fullNameFilter">
JSFIddle

Resources