So bedienen Sie AngularJS und verwenden den benutzerdefinierten Filter Filter, um die NG-Repeat-Deduplizierung zu steuern-js-Tutorial-php.cn

So bedienen Sie AngularJS und verwenden den benutzerdefinierten Filter Filter, um die NG-Repeat-Deduplizierung zu steuern

php中世界最好的语言

Freigeben： 2018-06-02 14:11:04

Original

2205 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie AngularJSFilter verwenden, um Filter anzupassen, um die ng-repeat-Deduplizierung zu steuern, und wie Sie AngularJS bedienen, um Filter zu verwenden, um Filter anzupassen, um ng-repeat-Deduplizierung zu steuern. Wiederholen Sie dies. Was sind die wichtigen Vorsichtsmaßnahmen? Nachfolgend finden Sie praktische Fälle, schauen wir uns diese gemeinsam an.

<!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>

Nach dem Login kopieren

Operationsergebnisse:

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie unter Anderem Verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie das Bildanzeige-Plug-in highslide.js in jQuery

So implementieren Sie es Scrollen Sie zur Seite in Vue. Unbegrenztes Laden von Daten unten

Das obige ist der detaillierte Inhalt vonSo bedienen Sie AngularJS und verwenden den benutzerdefinierten Filter Filter, um die NG-Repeat-Deduplizierung zu steuern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!