it-swarm.com.de

Angular filtert ein Objekt nach seinen Eigenschaften

Ich habe ein Objekt mit einer Reihe von Objekteigenschaften, das sich in der folgenden ähnlichen Struktur befindet (dies ist die Art, wie die Daten von einem Dienst zurückkommen):

{
  "1": {
    "type": "foo",
    "name": "blah"
  },
  "2": {
    "type": "bar"
  },
  "3": {
    "type": "foo"
  },
  "4": {
    "type": "baz"
  },
  "5": {
    "type": "test"
  }
}

Wenn ich eine Wiederholungswiederholung mache, kann ich über alle 5 dieser Objekte iterieren, etwa:

<div ng-repeat="item in items">{{item.type}}</div>

Was ich wirklich tun möchte, ist jedoch nur die Wiederholung von Elementen, die NICHT vom Typ "foo" sind, und zwar 3 Iterationen anstelle von 5. Ich weiß, dass Filter irgendwie dazu verwendet werden können, aber ich bin es nicht sicher wie. Ich habe folgendes versucht:

<div ng-repeat="item in items| !filter:{type:'foo'}">{{item.type}}</div>

aber das geht nicht. Selbst wenn Sie Folgendes tun, um sich auf nur 2 Objekte (diejenigen mit item.type === "foo") zu beschränken, funktioniert es nicht und führt 5 Iterationen aus:

<div ng-repeat="item in items| filter:{type:'foo'}">{{item.type}}</div>

Im Wesentlichen möchte ich etwas Ähnliches machen:

<div ng-repeat="item in items" ng-if="item.type !=='foo'>{{item.type}}</div>

Ich weiß jedoch, dass man nicht funktioniert.

28
Conqueror

Filter funktioniert auf Arrays, aber Sie haben ein Objektliteral.

Sie können also entweder Ihr Objektliteral in ein Array konvertieren oder einen eigenen Filter erstellen, der das Objektliteral aufnimmt.

Wenn Sie diese Indexwerte nicht benötigen, ist die Konvertierung in ein Array möglicherweise die beste Wahl. (Das Array funktioniert wie folgt: http://jsfiddle.net/NqA8d/3/ ):

$scope.items = [{
    "type": "foo",
        "name": "blah"
}, {
    "type": "bar"
}, {
    "type": "foo"
}, {
    "type": "baz"
}, {
    "type": "test"
}];

Falls Sie einen Filter erstellen möchten, haben Sie folgende Möglichkeiten:

myApp.filter('myFilter', function () {
    return function (items, search) {
        var result = [];
        angular.forEach(items, function (value, key) {
            angular.forEach(value, function (value2, key2) {
                if (value2 === search) {
                    result.Push(value2);
                }
            })
        });
        return result;

    }
});

Und diese Geige: http://jsfiddle.net/NqA8d/5/

16
KayakDave

Etwas spät zum Antworten, aber das könnte helfen:

Wenn Sie nach einem Enkel (oder tiefer) des angegebenen Objekts filtern möchten, können Sie die Objekthierarchie weiter ausbauen. Wenn Sie beispielsweise nach "thing.properties.title" filtern möchten, können Sie Folgendes tun:

<div ng-repeat="thing in things | filter: { properties: { title: title_filter } }">

Sie können auch nach mehreren Eigenschaften eines Objekts filtern, indem Sie sie einfach zu Ihrem Filterobjekt hinzufügen:

<div ng-repeat="thing in things | filter: { properties: { title: title_filter, id: id_filter } }">

Die Syntax von "nicht gleich" ist nur ein wenig falsch. Versuchen Sie Folgendes:

<div ng-repeat="thing in things | filter: { properties: { title: '!' + title_filter } }">
44

Obwohl ich damit einverstanden bin, dass das Konvertieren Ihres Objekts hier die beste Option ist, können Sie auch diese Filterfunktion verwenden:

angular.module('app').filter('objectByKeyValFilter', function () {
return function (input, filterKey, filterVal) {
    var filteredInput ={};
     angular.forEach(input, function(value, key){
       if(value[filterKey] && value[filterKey] !== filterVal){
          filteredInput[key]= value;
        }
     });
     return filteredInput;
}});

so was:

<div ng-repeat="(key, value) in data | objectByKeyValFilter:'type':'foo'">{{key}}{{value.type}}</div> 

Siehe auch den Plunker .

16

Versuchen Sie dies (im Controller): 

$scope.notFooFilter = function(item)
{
    return (item.type !== 'foo');
};

Und in HTML-Markup:

<div ng-repeat="item in items| filter:notFooFilter">{{item.type}}</div>
4
strelok2010

Versuchen Sie dies , um das Objekt zu filtern 

var rateSelected = $filter('filter')($scope.GradeList, function (obj) {
                        if(obj.GradeId == $scope.contractor_emp.save_modal_data.GradeId)
                        return obj;
                });
0
Code Spy

Ich brauche das alles nicht. Diese Lösung funktioniert gut, ohne dass Sie einen eigenen Filter konvertieren oder erstellen müssen:

 {{myModel.userSelectedHour["Start"]}}

Daher object. ["Property"] statt object.property.

0
Alex Zanfir