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:461747browse
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:'id'">
{{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>
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!