AngularJS使用Filter自定義過(guò)濾器控制ng-repeat去除重復(fù)功能示例
本文實(shí)例講述了AngularJS使用Filter自定義過(guò)濾器控制ng-repeat去除重復(fù)功能。分享給大家供大家參考,具體如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.dbjr.com.cn ng-repeat去除重復(fù)</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 自定義過(guò)濾器 //1.使用過(guò)濾器,去除重復(fù) 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]; //當(dāng)前unique 的過(guò)濾只針對(duì),對(duì)象數(shù)組過(guò)濾 $scope.items = [ { id: 1, name: 'zhangsan' }, { id: 2, name: 'lisi' }, { id: 1, name: 'zhangsan' }, ]; }); </script> </body> </html>
運(yùn)行結(jié)果:
PS:這里再為大家提供幾款相關(guān)工具供大家參考使用:
在線去除重復(fù)項(xiàng)工具:
http://tools.jb51.net/code/quchong
在線文本去重復(fù)工具:
http://tools.jb51.net/aideddesign/txt_quchong
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《AngularJS指令操作技巧總結(jié)》、《AngularJS入門(mén)與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
- 詳解AngularJS中自定義過(guò)濾器
- 詳解AngularJS中$filter過(guò)濾器使用(自定義過(guò)濾器)
- AngularJS 自定義過(guò)濾器詳解及實(shí)例代碼
- AngularJS自定義過(guò)濾器用法經(jīng)典實(shí)例總結(jié)
- Angularjs 依賴壓縮及自定義過(guò)濾器寫(xiě)法
- angularJs自定義過(guò)濾器實(shí)現(xiàn)手機(jī)號(hào)信息隱藏的方法
- AngularJS實(shí)現(xiàn)的自定義過(guò)濾器簡(jiǎn)單示例
- 簡(jiǎn)述angular自定義過(guò)濾器在頁(yè)面和控制器中的使用
- Angular.Js中過(guò)濾器filter與自定義過(guò)濾器filter實(shí)例詳解
- 詳解Angular的內(nèi)置過(guò)濾器和自定義過(guò)濾器【推薦】
- angularjs自定義過(guò)濾器demo示例
相關(guān)文章
AngularJS控制器controller給模型數(shù)據(jù)賦初始值的方法
這篇文章主要介紹了AngularJS控制器controller給模型數(shù)據(jù)賦初始值的方法,涉及AngularJS控制器controller簡(jiǎn)單賦值操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-01-01AngularJS解決ng-if中的ng-model值無(wú)效的問(wèn)題
本篇文章主要介紹了AngularJS解決ng-if中的ng-model值無(wú)效的問(wèn)題,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06AngularJS2中一種button切換效果的實(shí)現(xiàn)方法(二)
這篇文章主要介紹了AngularJS2中一種button切換效果的實(shí)現(xiàn)方法(二),非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03AngularJS中過(guò)濾器的使用與自定義實(shí)例代碼
這篇文章運(yùn)用實(shí)例代碼給大家介紹了angularjs中過(guò)濾器的使用和自定義過(guò)濾器,對(duì)大家學(xué)習(xí)AngularJS具有一定的參考借鑒價(jià)值,感興趣的朋友們可以參考借鑒。2016-09-09在AngularJS中使用jQuery的zTree插件的方法
這篇文章主要介紹了在AngularJS中使用jQuery的zTree插件的方法,Angular中集成了jqLite,但還不是完全版的jQuery,需要的朋友可以參考下2016-04-04Angularjs中三種數(shù)據(jù)的綁定策略(“@”,“=”,“&”)
在AngularJS的指令中存在著三種綁定策略,他們分別是’=’,’@’,’&’。下面這篇文章主要介紹了Angularjs中這三種數(shù)據(jù)的綁定策略,有需要的朋友們可以參考借鑒,下面來(lái)一起看看吧。2016-12-12AngularJs實(shí)現(xiàn)分頁(yè)功能不帶省略號(hào)的代碼
這篇文章主要介紹了AngularJs實(shí)現(xiàn)分頁(yè)功能不帶省略號(hào)的代碼的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-05-05