AngularJS使用Filter自定义过滤器控制ng

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ng-repeat去除重复</title> <script src="https://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> <p ng-repeat="x in items | unique:'id'"> {{x.id}}---{{x.name}} </p> </div> <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>

运行结果:

AngularJS使用Filter自定义过滤器控制ng

PS:这里再为大家提供几款相关工具供大家参考使用:

在线去除重复项工具:

在线文本去重复工具:

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/0eaf0c2c4cb1186d680b8b027a80908a.html