AngularJS使用Filter自定义过滤器控制ng-repeat去除重
网络编程 2021-07-04 17:33www.168986.cn编程入门
这篇文章主要介绍了AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能,结合实例形式分析了AngularJS自定义过滤器的定义及数组过滤相关操作技巧,需要的朋友可以参考下
本文实例讲述了AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能。分享给大家供大家参考,具体如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>.jb51. ng-repeat去除重复</title> <script src="http://apps.bdimg./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('mon', []).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', ['mon']); 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>
运行结果:
PS:这里再为大家提供几款相关工具供大家参考使用:
在线去除重复项工具:
在线文本去重复工具:
更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《》、《》及《》
希望本文所述对大家AngularJS程序设计有所帮助。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程