AngularJS使用Filter自定義過濾器控制ng-repeat去除重復功能示例
本文實例講述了AngularJS使用Filter自定義過濾器控制ng-repeat去除重復功能。分享給大家供大家參考,具體如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.dbjr.com.cn ng-repeat去除重復</title> <script src="http://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 的過濾只針對,對象數(shù)組過濾 $scope.items = [ { id: 1, name: 'zhangsan' }, { id: 2, name: 'lisi' }, { id: 1, name: 'zhangsan' }, ]; }); </script> </body> </html>
運行結果:
PS:這里再為大家提供幾款相關工具供大家參考使用:
在線去除重復項工具:
http://tools.jb51.net/code/quchong
在線文本去重復工具:
http://tools.jb51.net/aideddesign/txt_quchong
更多關于AngularJS相關內容感興趣的讀者可查看本站專題:《AngularJS指令操作技巧總結》、《AngularJS入門與進階教程》及《AngularJS MVC架構總結》
希望本文所述對大家AngularJS程序設計有所幫助。
相關文章
AngularJS控制器controller給模型數(shù)據(jù)賦初始值的方法
這篇文章主要介紹了AngularJS控制器controller給模型數(shù)據(jù)賦初始值的方法,涉及AngularJS控制器controller簡單賦值操作實現(xiàn)技巧,需要的朋友可以參考下2017-01-01AngularJS解決ng-if中的ng-model值無效的問題
本篇文章主要介紹了AngularJS解決ng-if中的ng-model值無效的問題,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06AngularJS2中一種button切換效果的實現(xiàn)方法(二)
這篇文章主要介紹了AngularJS2中一種button切換效果的實現(xiàn)方法(二),非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-03-03在AngularJS中使用jQuery的zTree插件的方法
這篇文章主要介紹了在AngularJS中使用jQuery的zTree插件的方法,Angular中集成了jqLite,但還不是完全版的jQuery,需要的朋友可以參考下2016-04-04Angularjs中三種數(shù)據(jù)的綁定策略(“@”,“=”,“&”)
在AngularJS的指令中存在著三種綁定策略,他們分別是’=’,’@’,’&’。下面這篇文章主要介紹了Angularjs中這三種數(shù)據(jù)的綁定策略,有需要的朋友們可以參考借鑒,下面來一起看看吧。2016-12-12