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 相关文章推荐
收藏一些不常用,但是有用的代码
Mar 12 Javascript
javascript SocialHistory 检查访问者是否访问过某站点
Aug 02 Javascript
图片img的src不变让浏览器重新加载实现方法
Mar 29 Javascript
js脚本实现数据去重
Nov 27 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
AngularJS 使用 UI Router 实现表单向导
Jan 29 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
Feb 24 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
Apr 23 Javascript
详解webpack进阶之loader篇
Aug 23 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
在vue项目中使用sass语法问题
Jul 18 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
如何给phpcms v9增加类似于phpcms 2008中的关键词表
2013/07/01 PHP
PHP的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
PHP实现PDO的mysql数据库操作类
2014/12/12 PHP
php同时使用session和cookie来保存用户登录信息的实现代码
2016/05/13 PHP
php die()与exit()的区别实例详解
2016/12/03 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
jQuery toggle()设置CSS样式
2009/11/05 Javascript
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
JS的document.all函数使用示例
2013/12/30 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
jquery读取xml文件实现省市县三级联动的方法
2015/05/29 Javascript
JavaScript中的replace()方法使用详解
2015/06/06 Javascript
javascript获取本机操作系统类型的方法
2015/08/13 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
Node.js查找当前目录下文件夹实例代码
2017/03/07 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
[36:29]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs TNC
2018/04/02 DOTA
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
简单了解Python生成器是什么
2019/07/02 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
便携式太阳能系统的创新者:GOAL ZERO
2018/02/04 全球购物
Java的类与C++的类有什么不同
2014/01/18 面试题
学生未请假就回家检讨书
2014/09/22 职场文书
副总经理党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/06 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
2016年春节问候语
2015/11/11 职场文书