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 相关文章推荐
用ADODB.Stream转换
Jan 22 Javascript
Javascript事件实例详解
Nov 06 Javascript
Windows8下搭建Node.js开发环境教程
Sep 03 Javascript
javascript动态修改Li节点值的方法
Jan 20 Javascript
简介JavaScript中strike()方法的使用
Jun 08 Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 Javascript
JS遍历对象属性的方法示例
Jan 10 Javascript
JS使用Dijkstra算法求解最短路径
Jan 17 Javascript
JQuery中queue方法用法示例
Jan 31 jQuery
JavaScript使用小插件实现倒计时的方法讲解
Mar 11 Javascript
Vue 请求传公共参数的操作
Jul 31 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.MVC的模板标签系统(四)
2006/09/05 PHP
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
用php+mysql一个名片库程序
2006/10/09 PHP
php ZipArchive压缩函数详解实例
2013/11/06 PHP
PHP计算当前坐标3公里内4个角落的最大最小经纬度实例
2016/02/26 PHP
jquery indexOf使用方法
2013/08/19 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
2016/11/10 Javascript
hovertree插件实现二级树形菜单(简单实用)
2016/12/28 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
2017/09/08 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
2019/03/29 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
[01:01:22]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python中的面向对象编程详解(下)
2015/04/13 Python
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
Django REST为文件属性输出完整URL的方法
2017/12/18 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
Pycharm无法显示动态图片的解决方法
2018/10/28 Python
对pycharm 修改程序运行所需内存详解
2018/12/03 Python
Python3爬虫学习之爬虫利器Beautiful Soup用法分析
2018/12/12 Python
美国最大的香水出口:FragranceX.com
2017/11/04 全球购物
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
中间件的定义
2016/08/09 面试题
请说出这段代码执行后a和b的值分别是多少
2015/03/28 面试题
幼儿园健康教育方案
2014/06/14 职场文书
社区反邪教工作方案
2014/06/16 职场文书
安全目标管理责任书
2014/07/25 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
2015应届毕业生求职信范文
2015/03/20 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP
MySQL空间数据存储及函数
2021/09/25 MySQL