Angular filters can only be applied to arrays and not objects, from angular's API -
"Selects a subset of items from array and returns it as a new array."
You have two options here: 1) move $scope.items to an array or - 2) pre-filter the ng-repeat items, like this:
<div ng-repeat="(k,v) in filterSecId(items)"> {{k}} {{v.pos}} </div>
$scope.filterSecId = function(items) { var result = {}; angular.forEach(items, function(value, key) { if (!value.hasOwnProperty('secId')) { result[key] = value; } }); return result; }
Note: This is a perf anti-pattern now. Angular 1.3 has stateless filters now (egghead.io/lessons/) so you'd definitely want to create a filter for this.
@kentcdodds don't post links which are not free!
Why not just add an ng-if on the repeated element?
javascript - How to filter (key, value) with ng-repeat in AngularJs? -...
Angular filters can only be applied to arrays and not objects, from angular's API -
"Selects a subset of items from array and returns it as a new array."
You have two options here: 1) move $scope.items to an array or - 2) pre-filter the ng-repeat items, like this:
<div ng-repeat="(k,v) in filterSecId(items)"> {{k}} {{v.pos}} </div>
$scope.filterSecId = function(items) { var result = {}; angular.forEach(items, function(value, key) { if (!value.hasOwnProperty('secId')) { result[key] = value; } }); return result; }
Note: This is a perf anti-pattern now. Angular 1.3 has stateless filters now (egghead.io/lessons/) so you'd definitely want to create a filter for this.
@kentcdodds don't post links which are not free!
Why not just add an ng-if on the repeated element?
javascript - How to filter (key, value) with ng-repeat in AngularJs? -...
My solution would be create custom filter and use it:
app.filter('with', function() { return function(items, field) { var result = {}; angular.forEach(items, function(value, key) { if (!value.hasOwnProperty(field)) { result[key] = value; } }); return result; }; });
And in html:
<div ng-repeat="(k,v) in items | with:'secId'"> {{k}} {{v.pos}} </div>
javascript - How to filter (key, value) with ng-repeat in AngularJs? -...
My solution would be create custom filter and use it:
app.filter('with', function() { return function(items, field) { var result = {}; angular.forEach(items, function(value, key) { if (!value.hasOwnProperty(field)) { result[key] = value; } }); return result; }; });
And in html:
<div ng-repeat="(k,v) in items | with:'secId'"> {{k}} {{v.pos}} </div>
javascript - How to filter (key, value) with ng-repeat in AngularJs? -...
ng-show="v.hasOwnProperty('secId')"
Thanks.. I used this but with ng-if instead
javascript - How to filter (key, value) with ng-repeat in AngularJs? -...
ng-show="v.hasOwnProperty('secId')"
Thanks.. I used this but with ng-if instead
javascript - How to filter (key, value) with ng-repeat in AngularJs? -...
Also you can use ng-repeat with ng-if:
<div ng-repeat="(key, value) in order" ng-if="value > 0">
javascript - How to filter (key, value) with ng-repeat in AngularJs? -...
Also you can use ng-repeat with ng-if:
<div ng-repeat="(key, value) in order" ng-if="value > 0">
javascript - How to filter (key, value) with ng-repeat in AngularJs? -...
You can simply use angular.filter module, and then you can filter even by nested properties. see: jsbin2 Examples:
angular.module('app', ['angular.filter']) .controller('MainCtrl', function($scope) { //your example data $scope.items = { 'A2F0C7':{ secId:'12345', pos:'a20' }, 'C8B3D1':{ pos:'b10' } }; //more advantage example $scope.nestedItems = { 'A2F0C7':{ details: { secId:'12345', pos:'a20' } }, 'C8B3D1':{ details: { pos:'a20' } }, 'F5B3R1': { secId:'12345', pos:'a20' } }; });
<b>Example1:</b> <p ng-repeat="item in items | toArray: true | pick: 'secId'"> {{ item.$key }}, {{ item }} </p> <b>Example2:</b> <p ng-repeat="item in nestedItems | toArray: true | pick: 'secId || details.secId' "> {{ item.$key }}, {{ item }} </p>
You should disclose that angular.filter is not a core angular module and you are the author of it.
It looks like the toArray filter is not present anymore. Is there a replacement, because the filter filter still does not allow objects?
javascript - How to filter (key, value) with ng-repeat in AngularJs? -...
You can simply use angular.filter module, and then you can filter even by nested properties. see: jsbin2 Examples:
angular.module('app', ['angular.filter']) .controller('MainCtrl', function($scope) { //your example data $scope.items = { 'A2F0C7':{ secId:'12345', pos:'a20' }, 'C8B3D1':{ pos:'b10' } }; //more advantage example $scope.nestedItems = { 'A2F0C7':{ details: { secId:'12345', pos:'a20' } }, 'C8B3D1':{ details: { pos:'a20' } }, 'F5B3R1': { secId:'12345', pos:'a20' } }; });
<b>Example1:</b> <p ng-repeat="item in items | toArray: true | pick: 'secId'"> {{ item.$key }}, {{ item }} </p> <b>Example2:</b> <p ng-repeat="item in nestedItems | toArray: true | pick: 'secId || details.secId' "> {{ item.$key }}, {{ item }} </p>
You should disclose that angular.filter is not a core angular module and you are the author of it.
It looks like the toArray filter is not present anymore. Is there a replacement, because the filter filter still does not allow objects?
javascript - How to filter (key, value) with ng-repeat in AngularJs? -...
It is kind of late, but I looked for e similar filter and ended using something like this:
<div ng-controller="TestCtrl"> <div ng-repeat="(k,v) in items | filter:{secId: '!!'}"> {{k}} {{v.pos}} </div> </div>
How did you get this to work? When I use a filter with an ng-repeated object, I get an error which is what is expected base on the Angular documentation.
javascript - How to filter (key, value) with ng-repeat in AngularJs? -...
It is kind of late, but I looked for e similar filter and ended using something like this:
<div ng-controller="TestCtrl"> <div ng-repeat="(k,v) in items | filter:{secId: '!!'}"> {{k}} {{v.pos}} </div> </div>
How did you get this to work? When I use a filter with an ng-repeated object, I get an error which is what is expected base on the Angular documentation.
javascript - How to filter (key, value) with ng-repeat in AngularJs? -...
I would just create a custom filter. They are not that hard.
angular.module('myFilters', []). filter('bygenre', function() { return function(movies,genres) { var out = []; // Filter logic here, adding matches to the out var. return out; } });
<h1>Movies</h1> <div ng-init="movies = [ {title:'Man on the Moon', genre:'action'}, {title:'Meet the Robinsons', genre:'family'}, {title:'Sphere', genre:'action'} ];" /> <input type="checkbox" ng-model="genrefilters.action" />Action <br /> <input type="checkbox" ng-model="genrefilters.family" />Family <br />{{genrefilters.action}}::{{genrefilters.family}} <ul> <li ng-repeat="movie in movies | bygenre:genrefilters">{{movie.title}}: {{movie.genre}}</li> </ul>
UPDATE: Here is a fiddle that has an exact demo of my suggestion.
so then in the out I return the movie objects that I want to display?
Sorry it took me awhile to get back. I updated my answer with a fiddle of a concrete example.
ok, thanks, in the meantime I figured it out myself, but it will sure help someone later :)
Either i have two value such like active and inactive then how can i search seprately using this filter. we do not want to make custom filter.
javascript - How to filter multiple values (OR operation) in angularJS...
I would just create a custom filter. They are not that hard.
angular.module('myFilters', []). filter('bygenre', function() { return function(movies,genres) { var out = []; // Filter logic here, adding matches to the out var. return out; } });
<h1>Movies</h1> <div ng-init="movies = [ {title:'Man on the Moon', genre:'action'}, {title:'Meet the Robinsons', genre:'family'}, {title:'Sphere', genre:'action'} ];" /> <input type="checkbox" ng-model="genrefilters.action" />Action <br /> <input type="checkbox" ng-model="genrefilters.family" />Family <br />{{genrefilters.action}}::{{genrefilters.family}} <ul> <li ng-repeat="movie in movies | bygenre:genrefilters">{{movie.title}}: {{movie.genre}}</li> </ul>
UPDATE: Here is a fiddle that has an exact demo of my suggestion.
so then in the out I return the movie objects that I want to display?
Sorry it took me awhile to get back. I updated my answer with a fiddle of a concrete example.
ok, thanks, in the meantime I figured it out myself, but it will sure help someone later :)
Either i have two value such like active and inactive then how can i search seprately using this filter. we do not want to make custom filter.
javascript - How to filter multiple values (OR operation) in angularJS...
You can use a controller function to filter.
function MoviesCtrl($scope) { $scope.movies = [{name:'Shrek', genre:'Comedy'}, {name:'Die Hard', genre:'Action'}, {name:'The Godfather', genre:'Drama'}]; $scope.selectedGenres = ['Action','Drama']; $scope.filterByGenres = function(movie) { return ($scope.selectedGenres.indexOf(movie.genre) !== -1); }; }
<div ng-controller="MoviesCtrl"> <ul> <li ng-repeat="movie in movies | filter:filterByGenres"> {{ movie.name }} {{ movie.genre }} </li> </ul> </div>
Besides separation of concerns, is there any reason (performance wise) that this would be avoided?
javascript - How to filter multiple values (OR operation) in angularJS...
You can use a controller function to filter.
function MoviesCtrl($scope) { $scope.movies = [{name:'Shrek', genre:'Comedy'}, {name:'Die Hard', genre:'Action'}, {name:'The Godfather', genre:'Drama'}]; $scope.selectedGenres = ['Action','Drama']; $scope.filterByGenres = function(movie) { return ($scope.selectedGenres.indexOf(movie.genre) !== -1); }; }
<div ng-controller="MoviesCtrl"> <ul> <li ng-repeat="movie in movies | filter:filterByGenres"> {{ movie.name }} {{ movie.genre }} </li> </ul> </div>
Besides separation of concerns, is there any reason (performance wise) that this would be avoided?
javascript - How to filter multiple values (OR operation) in angularJS...
Creating a custom filter might be overkill here, you can just pass in a custom comparator, if you have the multiples values like:
$scope.selectedGenres = "Action, Drama"; $scope.containsComparator = function(expected, actual){ return actual.indexOf(expected) > -1; };
then in the filter:
filter:{name:selectedGenres}:containsComparator
Helped me a lot. Thanks
@chrismarx What would the ng-model be in the view file to link up to the described filter? (sorry, still learning here) -- I like the simplicity of your answer and trying to get it work but not sure how to label my <input>'s ng-model. :)
javascript - How to filter multiple values (OR operation) in angularJS...
Creating a custom filter might be overkill here, you can just pass in a custom comparator, if you have the multiples values like:
$scope.selectedGenres = "Action, Drama"; $scope.containsComparator = function(expected, actual){ return actual.indexOf(expected) > -1; };
then in the filter:
filter:{name:selectedGenres}:containsComparator
Helped me a lot. Thanks
@chrismarx What would the ng-model be in the view file to link up to the described filter? (sorry, still learning here) -- I like the simplicity of your answer and trying to get it work but not sure how to label my <input>'s ng-model. :)
javascript - How to filter multiple values (OR operation) in angularJS...
Here is the implementation of custom filter, which will filter the data using array of values.It will support multiple key object with both array and single value of keys. As mentioned inangularJS API AngularJS filter Doc supports multiple key filter with single value, but below custom filter will support same feature as angularJS and also supports array of values and combination of both array and single value of keys.Please find the code snippet below,
myApp.filter('filterMultiple',['$filter',function ($filter) { return function (items, keyObj) { var filterObj = { data:items, filteredData:[], applyFilter : function(obj,key){ var fData = []; if (this.filteredData.length == 0) this.filteredData = this.data; if (obj){ var fObj = {}; if (!angular.isArray(obj)){ fObj[key] = obj; fData = fData.concat($filter('filter')(this.filteredData,fObj)); } else if (angular.isArray(obj)){ if (obj.length > 0){ for (var i=0;i<obj.length;i++){ if (angular.isDefined(obj[i])){ fObj[key] = obj[i]; fData = fData.concat($filter('filter')(this.filteredData,fObj)); } } } } if (fData.length > 0){ this.filteredData = fData; } } } }; if (keyObj){ angular.forEach(keyObj,function(obj,key){ filterObj.applyFilter(obj,key); }); } return filterObj.filteredData; } }]);
arrayOfObjectswithKeys | filterMultiple:{key1:['value1','value2','value3',...etc],key2:'value4',key3:[value5,value6,...etc]}
Here is a fiddle example with implementation of above "filterMutiple" custom filter. :::Fiddle Example:::
You seem to have the correct intention but your example doesn't seem to work as expected. The output in the table seems rather inconsistent.
This does not work with JSON's with nested objects. Would've been ideal if it did. also it fires a length property undefined error in the console.
It is working for me but it returns all the results if it doesn't find the searched attribute in the list, how can I do to invert this behavior and return no result if the value doesn't exist in the list?
if (fData.length > 0){ this.filteredData = fData; }
this.filteredData = fData;
javascript - How to filter multiple values (OR operation) in angularJS...
Here is the implementation of custom filter, which will filter the data using array of values.It will support multiple key object with both array and single value of keys. As mentioned inangularJS API AngularJS filter Doc supports multiple key filter with single value, but below custom filter will support same feature as angularJS and also supports array of values and combination of both array and single value of keys.Please find the code snippet below,
myApp.filter('filterMultiple',['$filter',function ($filter) { return function (items, keyObj) { var filterObj = { data:items, filteredData:[], applyFilter : function(obj,key){ var fData = []; if (this.filteredData.length == 0) this.filteredData = this.data; if (obj){ var fObj = {}; if (!angular.isArray(obj)){ fObj[key] = obj; fData = fData.concat($filter('filter')(this.filteredData,fObj)); } else if (angular.isArray(obj)){ if (obj.length > 0){ for (var i=0;i<obj.length;i++){ if (angular.isDefined(obj[i])){ fObj[key] = obj[i]; fData = fData.concat($filter('filter')(this.filteredData,fObj)); } } } } if (fData.length > 0){ this.filteredData = fData; } } } }; if (keyObj){ angular.forEach(keyObj,function(obj,key){ filterObj.applyFilter(obj,key); }); } return filterObj.filteredData; } }]);
arrayOfObjectswithKeys | filterMultiple:{key1:['value1','value2','value3',...etc],key2:'value4',key3:[value5,value6,...etc]}
Here is a fiddle example with implementation of above "filterMutiple" custom filter. :::Fiddle Example:::
You seem to have the correct intention but your example doesn't seem to work as expected. The output in the table seems rather inconsistent.
This does not work with JSON's with nested objects. Would've been ideal if it did. also it fires a length property undefined error in the console.
It is working for me but it returns all the results if it doesn't find the searched attribute in the list, how can I do to invert this behavior and return no result if the value doesn't exist in the list?
if (fData.length > 0){ this.filteredData = fData; }
this.filteredData = fData;