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

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

php中世界最好的语言

Libérer： 2018-06-02 14:11:04

original

2176 Les gens l'ont consulté

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>

Copier après la connexion

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!