Heim > Artikel > Web-Frontend > So bedienen Sie AngularJS und verwenden den benutzerdefinierten Filter Filter, um die NG-Repeat-Deduplizierung zu steuern

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

php中世界最好的语言Original: 2018-06-02 14:11:042130Durchsuche

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie das Bildanzeige-Plugin highslide.js in jQueryNächster Artikel：So verwenden Sie das Bildanzeige-Plugin highslide.js in jQuery

In Verbindung stehende Artikel

Mehr sehen