Maison > Article > interface Web > AngularJS utilise le filtre personnalisé Filter pour contrôler ng-repeat afin de supprimer l'exemple de fonctions en double

AngularJS utilise le filtre personnalisé Filter pour contrôler ng-repeat afin de supprimer l'exemple de fonctions en double

不言original: 2018-04-21 16:12:461808parcourir

Cet article présente principalement l'utilisation par AngularJS du filtre personnalisé Filter pour contrôler la fonction de suppression des doublons de ng-repeat. Il analyse la définition du filtre personnalisé AngularJS et les compétences opérationnelles liées au filtrage de tableaux sous forme d'exemples.

L'exemple de cet article décrit comment AngularJS utilise le filtre personnalisé Filter pour contrôler ng-repeat afin de supprimer les doublons. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>www.jb51.net ng-repeat去除重复</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<p ng-app="myApp" ng-controller="myCtrl">
  <p ng-repeat="x in items | unique:&#39;id&#39;">
    {{x.id}}---{{x.name}}
  </p>
</p>
<script>
  //AngularJs 自定义过滤器
  //1.使用过滤器，去除重复
  angular.module(&#39;common&#39;, []).filter(&#39;unique&#39;, function () {
    return function (collection, keyname) {
      console.info(collection);
      console.info(keyname);
      var output = [],
        keys = [];
      angular.forEach(collection, function (item) {
        var key = item[keyname];
        if (keys.indexOf(key) === -1) {
          keys.push(key);
          output.push(item);
        }
      });
      return output;
    }
  });
  var app = angular.module(&#39;myApp&#39;, [&#39;common&#39;]);
  app.controller(&#39;myCtrl&#39;, function ($scope) {
    //$scope.items = [1, 2, 3,2];
    //当前unique 的过滤只针对，对象数组过滤
    $scope.items = [
      { id: 1, name: &#39;zhangsan&#39; },
      { id: 2, name: &#39;lisi&#39; },
      { id: 1, name: &#39;zhangsan&#39; },
    ];
  });
</script>
</body>
</html>

Résultats en cours d'exécution :

Connexe recommandé :

Une brève discussion sur l'utilisation de $destory dans AngularJS

Comment le filtre de tableau filtre les éléments du tableau

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Filter

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：La relation entre le mode d'appel JavaScript et cette liaison de mot cléArticle suivant：La relation entre le mode d'appel JavaScript et cette liaison de mot clé

Articles Liés

Voir plus