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 相关文章推荐
javascript使用中为什么10..toString()正常而10.toString()出错呢
Jan 11 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
jQuery性能优化技巧分析
Feb 20 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
js模仿php中strtotime()与date()函数实现方法
Aug 11 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 Javascript
shiro授权的实现原理
Sep 21 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
Oct 26 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 Javascript
如何为vue的项目添加单元测试
Dec 19 Javascript
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把JPEG图片转换成Progressive JPEG的方法
2014/06/30 PHP
Javascript常用运算符(Operators)-javascript基础教程
2007/12/14 Javascript
javaScript 简单验证代码(用户名,密码,邮箱)
2009/09/28 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
老生常谈jquery id选择器和class选择器的区别
2017/02/12 Javascript
react.js 获取真实的DOM节点实例(必看)
2017/04/17 Javascript
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
js装饰设计模式学习心得
2018/02/17 Javascript
webpack组织模块打包Library的原理及实现
2018/03/10 Javascript
微信小程序request请求封装,验签代码实例
2019/12/04 Javascript
Python自动重试HTTP连接装饰器
2015/04/28 Python
python生成随机图形验证码详解
2017/11/08 Python
Python用csv写入文件_消除空余行的方法
2018/07/06 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
PyTorch的深度学习入门教程之构建神经网络
2019/06/27 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
python+gdal+遥感图像拼接(mosaic)的实例
2020/03/10 Python
解决Django no such table: django_session的问题
2020/04/07 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
html Table 表头固定的实现
2019/01/22 HTML / CSS
支票、地址标签、包装纸和慰问卡:Current Catalog
2018/01/30 全球购物
Paul’s Boutique官网:英国时尚手袋品牌
2018/03/31 全球购物
体育教师个人的自我评价
2014/02/16 职场文书
工商治理实习生的自我评价分享
2014/02/20 职场文书
讲文明树新风演讲稿
2014/05/12 职场文书
党员转正党支部意见
2015/06/02 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs