Fonction de filtre personnalisée AngularJS

Question

Dans mon contrôleur, je voudrais filtrer un tableau d'objets. Chacun de ces objets est une carte qui peut contenir des chaînes de caractères ainsi que des listes.

J'ai essayé d'utiliser $filter('filter')(array, function) mais je ne sais pas comment accéder aux éléments individuels du tableau dans ma fonction. Voici un extrait pour montrer ce que je veux.

$filter('filter')(array, function() {
  return criteriaMatch(item, criteria);
});

Et puis dans le criteriaMatch() je vais vérifier si chaque propriété individuelle correspond

var criteriaMatch = function(item, criteria) {
  // go thro each individual property in the item and criteria
  // and check if they are equal
}

Je dois faire tout cela dans le contrôleur et compiler une liste de listes et les définir dans la portée. J'ai donc besoin d'accéder au $filter('filter') uniquement de cette façon. Tous les exemples que j'ai trouvés sur le net jusqu'à présent ont des recherches de critères statiques à l'intérieur de la fonction, ils ne passent pas un objet de critères et ne testent pas chaque élément du tableau.

Answer 1

Vous pouvez l'utiliser comme ceci : http://plnkr.co/edit/vtNjEgmpItqxX5fdwtPi?p=preview

Comme vous avez trouvé, filter accepte la fonction prédicat qui accepte l'élément par élément du tableau. Ainsi, il suffit de créer une fonction prédicat basée sur le paramètre criteria .

Dans cet exemple, criteriaMatch est une fonction qui renvoie un prédicat qui correspond à la fonction criteria .

modèle :

<div ng-repeat="item in items | filter:criteriaMatch(criteria)">
  {{ item }}
</div>

l'étendue :

$scope.criteriaMatch = function( criteria ) {
  return function( item ) {
    return item.name === criteria.name;
  };
};

Answer 2

Voici un exemple de la façon dont vous utiliseriez filter dans votre JavaScript AngularJS (plutôt que dans un élément HTML).

Dans cet exemple, nous avons un tableau d'enregistrements de pays, chacun contenant un nom et un code ISO à 3 caractères.

Nous voulons écrire une fonction qui recherchera dans cette liste un enregistrement correspondant à un code spécifique à 3 caractères.

Voici comment nous procéderions sans en utilisant filter :

$scope.FindCountryByCode = function (CountryCode) {
    //  Search through an array of Country records for one containing a particular 3-character country-code.
    //  Returns either a record, or NULL, if the country couldn't be found.
    for (var i = 0; i < $scope.CountryList.length; i++) {
        if ($scope.CountryList[i].IsoAlpha3 == CountryCode) {
            return $scope.CountryList[i];
        };
    };
    return null;
};

Yep, rien de mal à ça.

Mais voici à quoi ressemblerait la même fonction, en utilisant les éléments suivants filter :

$scope.FindCountryByCode = function (CountryCode) {
    //  Search through an array of Country records for one containing a particular 3-character country-code.
    //  Returns either a record, or NULL, if the country couldn't be found.

    var matches = $scope.CountryList.filter(function (el) { return el.IsoAlpha3 == CountryCode; })

    //  If 'filter' didn't find any matching records, its result will be an array of 0 records.
    if (matches.length == 0)
        return null;

    //  Otherwise, it should've found just one matching record
    return matches[0];
};

Beaucoup plus propre.

Rappelez-vous que filter renvoie un tableau comme résultat (une liste d'enregistrements correspondants), donc dans cet exemple, nous voulons soit retourner 1 enregistrement, soit NULL.

J'espère que cela vous aidera.

Answer 3

En outre, si vous voulez utiliser le filtre dans votre contrôleur de la même manière que vous le faites ici :

<div ng-repeat="item in items | filter:criteriaMatch(criteria)">
  {{ item }}
</div>

Vous pourriez faire quelque chose comme :

var filteredItems =  $scope.$eval('items | filter:filter:criteriaMatch(criteria)');