Come filtrare (chiave, valore) con ng-repeat in AngularJs?

Sto cercando di fare qualcosa come:

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

Parte angular:

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

Ma in qualche modo, mi sta mostrando tutti gli oggetti. Come posso filtrare (chiave, valore)?

I filtri angolari possono essere applicati solo agli array e non agli oggetti, dall’API di angular –

“Seleziona un sottoinsieme di elementi dalla matrice e lo restituisce come un nuovo array.”

Hai due opzioni qui:
1) spostare $scope.items in un array o –
2) pre-filtrare gli elementi ng-repeat , come questo:

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

E sul controller:

 $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/

La mia soluzione sarebbe creare un filtro personalizzato e usarlo:

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

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

O semplicemente usa

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

Vedi la soluzione aggiornata qui:

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

Inoltre puoi usare ng-repeat con ng-if :

 

È ansible semplicemente utilizzare il modulo angular.filter e quindi è ansible filtrare anche per proprietà nidificate.
vedi: jsbin
2 esempi:

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

È un po ‘tardi, ma ho cercato un filtro simile e ho terminato di usare qualcosa del genere:

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

Ho fatto un po ‘più di un filtro generico che ho già utilizzato in più progetti:

  • object = l’object che deve essere filtrato
  • field = il campo all’interno dell’object su cui filtreremo
  • filter = il valore del filtro che deve corrispondere al 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; }; 

Anche se questa domanda è piuttosto vecchia, mi piacerebbe condividere la mia soluzione per gli sviluppatori angular 1. Il punto è semplicemente riutilizzare il filtro angular originale, ma passare in modo trasparente qualsiasi object come una matrice.

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

usalo in questo modo:

 
{{item | json}}

ecco un plunker