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:
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:
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