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 相关文章推荐
Jquery 获得服务器控件值的方法小结
May 11 Javascript
JS中使用变量保存arguments对象的方法
Jun 03 Javascript
使用jQuery加载html页面到指定的div实现方法
Jul 13 Javascript
AngularJS 实现弹性盒子布局的方法
Aug 30 Javascript
Vue中添加过渡效果的方法
Mar 16 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
May 08 Javascript
vue+Java后端进行调试时解决跨域问题的方式
Oct 19 Javascript
Vue实现active点击切换方法
Mar 16 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
Aug 24 Javascript
JS简单数组排序操作示例【sort方法】
May 17 Javascript
three.js利用射线Raycaster进行碰撞检测
Mar 12 Javascript
vue中如何自定义右键菜单详解
Dec 08 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
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
php完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
PHP获取音频文件的相关信息
2015/06/22 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
简单谈谈PHP中的trait
2017/02/25 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
jQuery之选项卡的简单实现
2014/02/28 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
JS实现自动切换文字的导航效果代码
2015/08/27 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
python通过smpt发送邮件的方法
2015/04/30 Python
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
Python实现找出数组中第2大数字的方法示例
2018/03/26 Python
六行python代码的爱心曲线详解
2019/05/17 Python
python实现视频分帧效果
2019/05/31 Python
matplotlib教程——强大的python作图工具库
2020/10/15 Python
Python字节单位转换(将字节转换为K M G T)
2021/03/02 Python
纯CSS3大转盘抽奖示例代码(响应式、可配置)
2017/01/13 HTML / CSS
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
Wilson体育用品官网:美国著名运动器材品牌
2019/05/12 全球购物
高中生自我鉴定范文
2013/10/30 职场文书
运动会广播稿200米
2014/01/27 职场文书
《掌声》教学反思
2014/02/23 职场文书
2014年教研活动总结范文
2014/04/26 职场文书
青岛海底世界导游词
2015/02/11 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
小学中队活动总结
2015/05/11 职场文书
如何使JavaScript休眠或等待
2021/04/27 Javascript
DQL数据查询语句使用示例
2022/12/24 MySQL