Filtre dynamique au sein de ng-repeat dans AngularJS

Pour mon application AngularJS j'ai une ng-repeat dans une ng-repeat:

Html:

<div ng-app="myApp">
    <div ng-controller="myController">
        <h2>working filter</h2>
        <div ng-repeat="category in categories">
            <h3>{{category}}</h3>
            <div ng-repeat="item in items | filter:{price.red: 0} ">{{item.name}}</div>
    </div>

        <h2>broken filter</h2>
        <div ng-repeat="category in categories">
            <h3>{{category}}</h3>
            <!-- price[category] should be red, blue, yellow, depending on the category in the ng-repeat -->
            <!-- price[category] should be bigger then 0 (or not zero, negative values will not occur) -->
            <div ng-repeat="item in items | filter:{price[category]: 0} ">{{item.name}}</div>
        </div>

    </div>
</div>

Javascript:

var myApp = angular.module('myApp', []);

myApp.controller('myController', function ($scope) {

    $scope.categories = ['red', 'blue', 'yellow'];
    $scope.items = [
        {name: 'one', price:{red: 0, blue: 1, yellow: 3} },
        {name: 'two', price:{red: 2, blue: 0, yellow: 0}},
    ]    

});

Veuillez consulter mon jsFiddle http://jsfiddle.net/hm8qD/

Alors, j'ai couru en deux problèmes:

  1. Le filtre n'accepte pas les crochets [] je ne peux donc pas faire le filtre dynamique, en fonction de la catégorie
  2. Le filtre doit retourner les articles qui ont un prix[catégorie] supérieure à zéro.

Pour le plus grand zéro je pouvais juste faire un filtre personnalisé. Cependant, comme je sais que les filtres ne pas accepter les paramètres, donc je n'ai aucun moyen de l'obtention de la catégorie (rouge, bleu ou jaune).

Veuillez noter que ceci est une version simplifiée de mon code et ce contexte ne pourrait pas faire le meilleur de sens. J'espère avoir été clair dans l'explication de ce que j'ai besoin du filtre pour le faire, puisque je suis nouveau sur AngularJS.

Pouvez-vous vider votre tentative dans un jsFiddle?
la syntaxe pour filtre: item in items | filter:filterCriteria
Oui Violon veuillez
J'ai ajouté un jsFiddle: jsfiddle.net/hm8qD
ici, vous allez 🙂 jsfiddle.net/hm8qD

OriginalL'auteur DivZero | 2013-05-17

  1. 3

    Apparemment, il est effectivement possible de passer des arguments à votre filtre, mais vous avez à faire un filtre personnalisé au lieu d'utiliser de filtre": l'expression". Ce que j'ai fait était de créer un filtre personnalisé qui prend les éléments et la catégorie comme arguments et retourne un tableau avec les éléments filtrés.

    myApp.filter('myFilter', function () {
    return function (items, category) {
        var newItems = [];
        for (var i = 0; i < items.length; i++) {
            if (items[i].price[category] > 0) {
                newItems.push(items[i]);
            }
        };

        return newItems;
    }
});

    Voir la mise à jour du Violon ici: http://jsfiddle.net/hm8qD/3/  

    OriginalL'auteur DivZero

  2. 1

    J'ai trouvé un autre et très soignée solution pour envoyer les paramètres du filtre (écrit en es6):

    $scope.myFilter = (category) => {
  return (item) => {
    if(category === 'fish' && item.type === 'salmon'){
       return true
    }
    return false
  }
}

    le balisage serait:

    <div ng-repeat="item in items | 
filter:myFilter(someCategory)>
     {{item.name}}
</div>

    Donc, fondamentalement, vous pouvez simplement la portée de la "catégorie" dans le filtre comme myFilter retourne une fonction sur le format attendu par le filtre.

    OriginalL'auteur Fraction