AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例


Posted in Javascript onApril 21, 2018

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3water.com 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 的过滤只针对,对象数组过滤
    $scope.items = [
      { id: 1, name: 'zhangsan' },
      { id: 2, name: 'lisi' },
      { id: 1, name: 'zhangsan' },
    ];
  });
</script>
</body>
</html>

运行结果:

AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例

Javascript 相关文章推荐
JS图片无缝滚动(简单利于使用)
Jun 17 Javascript
JS常用函数使用指南
Nov 23 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
Nov 28 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
学习Angular中作用域需要注意的坑
Aug 17 Javascript
jQuery控制元素隐藏和显示
Mar 03 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
element ui table 增加筛选的方法示例
Nov 02 Javascript
Jquery的Ajax技术使用方法
Jan 21 jQuery
js图片查看器插件用法示例
Jun 22 Javascript
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
JS实现字符串去重及数组去重的方法示例
Apr 21 #Javascript
AngularJs用户输入动态模板XSS攻击示例详解
Apr 21 #Javascript
vue源码解析之事件机制原理
Apr 21 #Javascript
JavaScript获取用户所在城市及地理位置
Apr 21 #Javascript
在vue-cli项目中使用bootstrap的方法示例
Apr 21 #Javascript
详解webpack模块化管理和打包工具
Apr 21 #Javascript
Node.Js生成比特币地址代码解析
Apr 21 #Javascript
You might like
用PHP产生动态的影像图
2006/10/09 PHP
PHP开发过程中常用函数收藏
2009/12/14 PHP
用PHP实现递归循环每一个目录
2010/08/08 PHP
php将时间差转换为字符串提示
2011/09/07 PHP
php内存缓存实现方法
2015/01/24 PHP
php获取YouTube视频信息的方法
2015/02/11 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
PHP实现C#山寨ArrayList的方法
2015/07/16 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
Yii框架实现的验证码、登录及退出功能示例
2017/05/20 PHP
javascript实现时间格式输出FormatDate函数
2015/01/13 Javascript
深入理解JavaScript中的对象
2015/06/04 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
Javascript实现代码折叠功能
2016/08/25 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
基于jQuery实现火焰灯效果导航菜单
2017/01/04 Javascript
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
js中的闭包实例展示
2018/11/01 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
JS实现图片切换特效
2019/12/23 Javascript
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
python 合并文件的具体实例
2013/08/08 Python
python魔法方法-自定义序列详解
2016/07/21 Python
selenium+python自动化测试之多窗口切换
2019/01/23 Python
Python Numpy中数据的常用保存与读取方法
2020/04/01 Python
Python远程方法调用实现过程解析
2020/07/28 Python
找到不普通的东西:Bonanza
2016/10/20 全球购物
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
Melissa鞋英国官方网站:Nonnon
2019/05/01 全球购物
一套.net面试题及答案
2016/11/02 面试题
工地门卫岗位职责范本
2014/07/01 职场文书
2015年双拥工作总结
2015/04/08 职场文书
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏