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

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

不言

Libérer： 2018-04-21 16:12:46

original

1751 Les gens l'ont consulté

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>

Copier après la connexion

Résultats en cours d'exécution :