it-swarm.com.de

Wie (Schlüssel, Wert) mit ng-repeat in AngularJs filtern?

Ich versuche etwas zu tun:

<div ng-controller="TestCtrl">
    <div ng-repeat="(k,v) in items | filter:hasSecurityId">
        {{k}} {{v.pos}}
    </div>
</div>

AngularJs Part:

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

    $scope.hasSecurityId = function(k,v)
    {
       return v.hasOwnProperty('secId');
    }
}

Aber irgendwie zeigt es mir alle Artikel. Wie kann ich filtern (Schlüssel, Wert)?

108
Vural Acar

Angular Filter können nur auf Arrays und keine Objekte angewendet werden, über die Winkels API -

Msgstr "Wählt eine Teilmenge von Elementen aus dem Array aus und gibt sie als neues Array zurück."

Sie haben hier zwei Möglichkeiten:
1) $scope.items in ein Array verschieben oder -
2) Vorfilterung der ng-repeat-Elemente wie folgt:

<div ng-repeat="(k,v) in filterSecId(items)">
    {{k}} {{v.pos}}
</div>

Und auf dem 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/

126
bmleite

Meine Lösung wäre, einen benutzerdefinierten Filter zu erstellen und ihn zu verwenden:

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

Und in HTML:

 <div ng-repeat="(k,v) in items | with:'secId'">
        {{k}} {{v.pos}}
 </div>
45

Sie können auch ng-repeat mit ng-if verwenden:

<div ng-repeat="(key, value) in order" ng-if="value > 0">
25
DenisKolodin

Oder einfach verwenden

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

Sehen Sie die aktualisierte Lösung hier:

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

21
Renaud

Sie können einfach angle.filter module verwenden und dann sogar nach verschachtelten Eigenschaften filtern.
siehe: jsbin
2 Beispiele:

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:

  <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> 
11
a8m

Es ist ziemlich spät, aber ich habe nach einem ähnlichen Filter gesucht und so etwas wie dieses verwendet:

<div ng-controller="TestCtrl">
 <div ng-repeat="(k,v) in items | filter:{secId: '!!'}">
   {{k}} {{v.pos}}
 </div>
</div>
7
ph6

Obwohl diese Frage ziemlich alt ist, möchte ich meine Lösung für die Entwickler von Winkel 1 mitteilen. Es geht darum, den ursprünglichen Winkelfilter wiederzuverwenden, aber Objekte transparent als Array zu übergeben.

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

benutze es so:

<div>
    <input ng-model="search" />
</div>
<div ng-repeat="item in test | objectFilter : search">
    {{item | json}}
</div>

hier ist ein plunker

0
ollix

Ich habe ein bisschen mehr von einem generischen Filter gemacht, den ich bereits in mehreren Projekten verwendet habe:

  • object = das Objekt, das gefiltert werden muss
  • feld = das Feld innerhalb dieses Objekts, nach dem wir filtern
  • filter = der Wert des Filters, der mit dem Feld übereinstimmen muss

HTML:

<input ng-model="customerNameFilter" />
<div ng-repeat="(key, value) in filter(customers, 'customerName', customerNameFilter" >
   <p>Number: {{value.customerNo}}</p>
   <p>Name: {{value.customerName}}</p>
</div>

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;
  };
0
BelgoCanadian