AngularJs Filter自定义过滤器控制ng-repeat去除重复
2016-06-08 08:20
751 查看
代码:
<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>结果:
相关文章推荐
- AngularJS之指令中controller与link(十二)
- AngularJs(五)从Controller控制器谈谈$scope作用域
- angularjs里 什么时候加{{}} 什么时候不用?
- uglify压缩angular控制器注意
- AngularJS 用promises和$q处理异步调用
- angular中模块的自动加载和手动加载
- 快速掌握AngularJs
- ng1和ng2的部分对比----angular2系列(四)
- angularjs 表单验证
- AngularJS之ng-class(十一)
- AngularJS 实现的输入自动完成补充功能
- AngularJS之Factory vs Service vs Provider
- AngularJS 遇到的小坑与技巧小结
- AngularJS 如何在控制台进行错误调试
- AngularJS之WebAPi上传
- 【Angular2】ng2的开始_组件
- AngularJS 自定义指令
- AngularJS之WebAPi上传(十)
- angularJS遇到的的坑
- 什么是Angular? 我们为什么要学习它?