Home > Article > Web Front-end > AngularJS uses Filter custom filter to control ng-repeat to remove duplicate functions example

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

不言Original: 2018-04-21 16:12:461803browse

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>

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!

Filter

Statement：

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

Previous article：The relationship between JavaScript calling mode and this keyword bindingNext article：The relationship between JavaScript calling mode and this keyword binding

See more

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

Related articles