Home > Web Front-end > JS Tutorial > body text

AngularJS uses Filter custom filter to control ng-repeat to remove duplicate functions example

不言
Release: 2018-04-21 16:12:46
Original
1802 people have browsed it

This article mainly introduces AngularJS to use Filter custom filter to control ng-repeat to remove duplicate functions. It analyzes the definition of AngularJS custom filter and array filtering related operation skills in the form of examples. Friends who need it can refer to it

The example of this article describes how AngularJS uses Filter custom filter to control ng-repeat to remove duplicates. Share it with everyone for your reference, the details are as follows:

<!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>
Copy after login

Running results:

Related recommendations:

A brief discussion on the usage of $destory in AngularJS

How array filter filters array elements

The above is the detailed content of AngularJS uses Filter custom filter to control ng-repeat to remove duplicate functions example. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!