web-dev-qa-db-fra.com

Filtre angulaire d'un objet par ses propriétés

J'ai un objet avec une série de propriétés d'objet qui est dans la structure similaire suivante (qui est la façon dont les données reviennent d'un service):

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

Quand je fais une répétition, je peux parcourir l'ensemble de ces 5 objets, quelque chose comme:

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

Cependant, ce que je veux vraiment faire, c’est itérer uniquement sur les éléments qui ne sont PAS du type "foo" , à savoir 3 itérations au lieu de 5. Je sais que les filtres peuvent en quelque sorte être exploités pour le faire, mais je ne le suis pas. bien sûr comment. J'ai essayé ce qui suit:

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

mais ça ne marche pas. En fait, même si vous limitez à 2 objets (ceux avec item.type === "foo"), cela ne fonctionne pas et fait 5 itérations:

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

En substance, je veux faire quelque chose de similaire à:

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

Cependant, je sais que cela ne fonctionne pas.

javascripttemplatesangularjsloops
28
Conqueror

Le filtre fonctionne sur les tableaux mais vous avez un littéral d'objet. 

Ainsi, vous pouvez convertir votre littéral d'objet en un tableau ou créer votre propre filtre qui prend en compte le littéral d'objet.

Si vous n'avez pas besoin de ces valeurs d'index, alors la conversion en tableau peut être votre meilleur pari ( Voici un véritable tour de passe-passe avec le tableau: http://jsfiddle.net/NqA8d/3/ ):

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

Si vous souhaitez utiliser un filtre, voici une façon de le faire:

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;

    }
});

Et ce violon: http://jsfiddle.net/NqA8d/5/

16
KayakDave

Un peu tard pour répondre, mais cela pourrait aider:

Si vous souhaitez filtrer sur un petit-enfant (ou plus profond) de l'objet donné, vous pouvez continuer à développer votre hiérarchie d'objets. Par exemple, si vous souhaitez filtrer sur 'thing.properties.title', vous pouvez effectuer les opérations suivantes:

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

Vous pouvez également filtrer sur plusieurs propriétés d'un objet simplement en les ajoutant à votre objet filtre:

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

La syntaxe de «pas égal» est juste un peu, essayez ce qui suit:

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

Bien que je convienne que la conversion de votre objet pourrait être la meilleure option ici, vous pouvez également utiliser cette fonction de filtre:

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

comme ça:

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

Voir aussi le Plunker .

16
hugo der hungrige

Essayez ceci (dans le contrôleur): 

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

Et en balisage HTML:

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

Essayez ceci pour filtrer l'objet 

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

Pas besoin de tout ça. Cette solution fonctionne bien sans avoir à convertir ou à créer votre propre filtre:

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

Par conséquent, object. ["Property"] au lieu de object.property.

0
Alex Zanfir