Maison > Article > interface Web > Comment faire fonctionner AngularJS et utiliser le filtre personnalisé Filter pour contrôler la déduplication ng-repeat

Comment faire fonctionner AngularJS et utiliser le filtre personnalisé Filter pour contrôler la déduplication ng-repeat

php中世界最好的语言original: 2018-06-02 14:11:042181parcourir

Cette fois, je vais vous montrer comment utiliser AngularJSUtiliser la personnalisation du filtreFilter pour contrôler la déduplication ng-repeat, faire fonctionner AngularJS et utiliser le filtre personnalisé Filter pour contrôler ng-repeat. les précautions importantes Vous trouverez ci-dessous des cas pratiques, examinons-les ensemble.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 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('common', []).filter('unique', 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('myApp', ['common']);
  app.controller('myCtrl', function ($scope) {
    //$scope.items = [1, 2, 3,2];
    //当前unique 的过滤只针对，对象数组过滤
    $scope.items = [
      { id: 1, name: 'zhangsan' },
      { id: 2, name: 'lisi' },
      { id: 1, name: 'zhangsan' },
    ];
  });
</script>
</body>
</html>

Résultats d'exploitation :

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention. vers d'autres articles connexes sur le site Web php chinois !

Lecture recommandée :

Comment utiliser le plug-in d'affichage d'images highslide.js dans jQuery

Comment implémenter faire défiler jusqu'à la page dans Vue Chargement illimité des données en bas

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!

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：Comment utiliser le plug-in d'affichage d'images highslide.js dans jQueryArticle suivant：Comment utiliser le plug-in d'affichage d'images highslide.js dans jQuery

Articles Liés

Voir plus