微信自助下单小程序_AngularJS使用Filter自界说过滤器控制ng

2021-01-08

AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例       这篇文章主要介绍了AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能,结合实例形式分析了AngularJS自定义过滤器的定义及数组过滤相关操作技巧,需要的朋友可以参考下

本文实例讲述了AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能。分享给大家供大家参考,具体如下:

 !DOCTYPE html 
 html 
 head 
 meta charset="utf-8" 
 title  ng-repeat去除重复 /title 
 script src="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}}
 /div 
 script 
 //AngularJs 自定义过滤器
 //1.使用过滤器,去除重复
 angular.module('common', []).filter('unique', function () {
 return function (collection, keyname) {
 (collection);
 (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相关内容感兴趣的读者可查看本站专题:《》、《》及《》

希望本文所述对大家AngularJS程序设计有所帮助。




扫描二维码分享到微信

在线咨询
联系电话

400-888-8866