Como filtrar (chave, valor) com ng-repeat em AngularJs?

Eu estou tentando fazer algo como:

{{k}} {{v.pos}}

Parte AngularJs:

 function TestCtrl($scope) { $scope.items = { 'A2F0C7':{'secId':'12345', 'pos':'a20'}, 'C8B3D1':{'pos':'b10'} }; $scope.hasSecurityId = function(k,v) { return v.hasOwnProperty('secId'); } } 

Mas de alguma forma, está me mostrando todos os itens. Como posso filtrar (chave, valor)?

Filtros angulares só podem ser aplicados a matrizes e não a objects, da API do angular

“Seleciona um subconjunto de itens da matriz e retorna como uma nova matriz.”

Você tem duas opções aqui:
1) mova $scope.items para uma matriz ou –
2) pre-filter os itens ng-repeat , assim:

 
{{k}} {{v.pos}}

E no controlador:

 $scope.filterSecId = function(items) { var result = {}; angular.forEach(items, function(value, key) { if (!value.hasOwnProperty('secId')) { result[key] = value; } }); return result; } 

jsfiddle : http://jsfiddle.net/bmleite/WA2BE/

Minha solução seria criar um filtro personalizado e usá-lo:

 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; }; }); 

E em html:

  
{{k}} {{v.pos}}

Ou simplesmente use

 ng-show="v.hasOwnProperty('secId')" 

Veja a solução atualizada aqui:

http://jsfiddle.net/RFontana/WA2BE/93/

Também você pode usar ng-repeat com ng-if :

 

Você pode simplesmente usar o módulo angular.filter e, em seguida, pode filtrar até mesmo por propriedades aninhadas.
veja: jsbin
2 exemplos:

JS:

 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' } }; }); 

HTML:

  Example1: 

{{ item.$key }}, {{ item }}

Example2:

{{ item.$key }}, {{ item }}

É meio tarde, mas eu procurei por um filtro similar e terminei de usar algo assim:

 
{{k}} {{v.pos}}

Eu fiz um pouco mais de um filtro genérico que já usei em vários projetos:

  • object = o object que precisa ser filtrado
  • campo = o campo dentro daquele object que filtraremos
  • filter = o valor do filtro que precisa corresponder ao campo

HTML:

  

Number: {{value.customerNo}}

Name: {{value.customerName}}

JS:

  $scope.filter = function(object, field, filter) { if (!object) return {}; if (!filter) return object; var filteredObject = {}; Object.keys(object).forEach(function(key) { if (object[key][field] === filter) { filteredObject[key] = object[key]; } }); return filteredObject; }; 

Embora essa questão seja bastante antiga, gostaria de compartilhar minha solução para desenvolvedores de 1 angular. O ponto é apenas reutilizar o filtro angular original, mas passando transparentemente quaisquer objects como um array.

 app.filter('objectFilter', function ($filter) { return function (items, searchToken) { // use the original input var subject = items; if (typeof(items) == 'object' && !Array.isArray(items)) { // or use a wrapper array, if we have an object subject = []; for (var i in items) { subject.push(items[i]); } } // finally, apply the original angular filter return $filter('filter')(subject, searchToken); } }); 

use-o assim:

 
{{item | json}}

aqui é um plunker

    Intereting Posts