Angularjs的ng-repeat中去除重复数据的方法

本文实例讲述了Angularjs的ng-repeat中去除重复数据的方法。分享给大家供大家参考，具体如下：

一、JS：

ngApp.filter('unique', function () {
  return function (collection, 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;
  };
});

二、Html：

<div ng-repeat="item in items | unique: 'id'"></div>

希望本文所述对大家AngularJS程序设计有所帮助。

赞 (0)

相关推荐

  • AngularJS入门（用ng-repeat指令实现循环输出

    循环输出列表很多项目在web服务端做,前端做好模版后后端写jsp代码,双方需要紧密合作,分清责任.有些项目由后端提供restful方法,前端用ajax调用自己循环,这种一般是大把的jquery拼字符串,太不直观,有人搞出了js模板,也没好到哪里去. 用AngularJS就爽多了,语法和JSP类似: <!doctype html> <html ng-app> <head> <meta charset="utf-8"> <title&g

  • AngularJS ng-repeat数组有重复值的解决方法

    AngularJS ng-repeat数组有重复值的解决方法

    前言 大家都知道默认在ng-repeat的时候每一个item都要保证是唯一的,否则console就会打出error告诉你哪个key/value是重复的. 如: $scope.items = [ 'red', 'blue', 'yellow', 'white', 'blue' ]; 这个数组blue就重复了,html这么遍历它 <li ng-repeat="item in items">{{ item }}</li> 控制台就会抛出一个错误: 点击错误链接到Ang

  • AngularJs ng-repeat 嵌套如何获取外层$index

    一个真实项目的例子是遍历表格的行和列, 每一行需要显示当前是第几行, 我立刻想到用$index, 简直就如同砍瓜切菜般, 一切都那么行云流水, 简直太容易了, 于是有了下面这段代码. <!-- repeat data row --> <tr ng-repeat="row in rows track by row.id"> <td ng-repeat="col in row.columns track by col.id"> <

  • AngularJS 获取ng-repeat动态生成的ng-model值实例详解

    AngularJS 获取ng-repeat动态生成的ng-model值实例详解

    AngularJS 获取ng-repeat动态生成的ng-model值               最近做项目遇到了ng-model是ng-repeat动态生成的,ng-model="变量",什么变量,是未知的,所以你无法在$scope."变量"取到值,就算取到值也是其中一个值,这样的问题,经过百度一番查找找到解决方案,这里记录下,也行可以帮助到大家. 代码 html <div> <div class="modal-header"

  • Angularjs中ng-repeat的简单实例

    Angularjs中ng-repeat的简单实例 第一个例子:使用ng-repeat最简单的例子 <html ng-app="myApp"> <head> <title>angularjs-demo</title> <script type="text/javascript" src="angular.min.js" charset="utf-8"></scri

  • AngularJS实践之使用ng-repeat中$index的注意点

    发现问题 最近有客户投诉,说在删除指定的某条记录时,结果删掉的却是另外一条记录!看起来是个很严重的BUG. 有一次我们在工作中碰到了这个问题. 要定位这个BUG非常麻烦, 因为客户也不清楚如何重现这个问题. 后来发现这个Bug是由于在 ng-repeat 中使用了 $index 引发的. 一个简单动作(action)的列表 先来看看一个完整有效的ng-repeat示例. <ul ng-controller="ListCtrl"> <li ng-repeat="

  • AngularJS使用ng-repeat指令实现下拉框

    AngularJS使用ng-repeat指令实现下拉框

    AngularJs 的 ng-repeat 让我们非常方便的遍历数组生成 Dom 元素,但是使用不当也会有性能问题.下面给大家分享在项目中使用ng-repeat指令实现下拉框. 1.问题背景 select下拉框里option组装成下拉框,这里利用ng-repeat指令来创建 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS之

  • angularjs在ng-repeat中使用ng-model遇到的问题

    在ng-repeat中使用ng-model时会有许多问题,有的人碰到无法获取绑定的数据内容,有的人遇到改动绑定的数据内容时所有循环生成的内容一起改变.上面的问题我在开发时也遇到过,但是解决后我却怎么也还原不了那种情况了,只能先简单介绍一下无法获取的情景该如何解决. 例如: html: <body> <div ng-controller="selectController"> <div ng-repeat="pop in citylist"

  • Angularjs的ng-repeat中去除重复数据的方法

    本文实例讲述了Angularjs的ng-repeat中去除重复数据的方法.分享给大家供大家参考,具体如下: 一.JS: ngApp.filter('unique', function () { return function (collection, keyname) { var output = [], keys = []; angular.forEach(collection, function (item) { var key = item[keyname]; if (keys.index

  • Java实现数组去除重复数据的方法详解

    本文实例讲述了Java实现数组去除重复数据的方法.分享给大家供大家参考,具体如下: 前一段时间被面试问到:如果一个数组中有重复元素,用什么方法可以去重?一时间会想到用一种方法,但是后来查阅资料后发现,有好多方法可以实现,现在就总结一下,比较简单的几种. 一.用List集合实现 int[] str = {5, 6, 6, 6, 8, 8, 7,4}; List<Integer> list = new ArrayList<Integer>(); for (int i=0; i<s

  • MSSql简单查询出数据表中所有重复数据的方法

    本文实例讲述了MSSql简单查询出数据表中所有重复数据的方法.分享给大家供大家参考,具体如下: 这里直接给出下面的例子: SELECT * FROM SYS_LogContent slc WHERE slc.LogInfo_ID IN ( SELECT slc2.LogInfo_ID FROM SYS_LogContent slc2 GROUP BY slc2.LogInfo_ID HAVING COUNT(*)>1 ) 简单说明: 关键代码在于上面的括号中.要想查询出所有重复的数据,可以按照某

  • Java中List集合去除重复数据的方法汇总

    List集合概述 List集合是一个元素有序(每个元素都有对应的顺序索引,第一个元素索引为0).且可重复的集合. List集合常用方法 List是Collection接口的子接口,拥有Collection所有方法外,还有一些对索引操作的方法. void add(int index, E element);:将元素element插入到List集合的index处: boolean addAll(int index, Collection<? extends E> c);:将集合c所有的元素都插入到

  • 详解JavaScript数组和字符串中去除重复值的方法

    原理在代码中表现得非常清晰,我们直接来看代码例子: var ages = array.map(function(obj) { return obj.age; }); ages = ages.filter(function(v,i) { return ages.indexOf(v) == i; }); console.log(ages); //=> [17, 35] function isBigEnough(element) { return element >= 10; } var filte

  • 如何去除Java中List集合中的重复数据

    1.循环list中的所有元素然后删除重复 public class duplicatRemoval { public static List removeDuplicate(List list){ for(int i=0;i<list. size()-1;i++){ for(int j=list.size()-1;j>i;j--){ if(list. get(j). equals(list.get(i))){ list.remove(j); } } } return list; } } 总结:

  • java中List去除重复数据的5种方式总结

    前言 List 是一个接口,它继承于Collection的接口.它代表着有序的队列.当我们讨论List的时候,一般都和Set作比较. List中元素可以重复,并且是有序的(这里的有序指的是按照放入的顺序进行存储.如按照顺序把1,2,3存入List,那么,从List中遍历出来的顺序也是1,2,3). Set中的元素不可以重复,并且是无序的(从set中遍历出来的数据和放入顺序没有关系). 以下介绍五种-不同的方法去除 Java 中ArrayList中的重复数据 1.使用LinkedHashSet删除

  • MySQL 去除重复数据实例详解

    MySQL 去除重复数据实例详解 有两个意义上的重复记录,一是完全重复的记录,也即所有字段均都重复,二是部分字段重复的记录.对于第一种重复,比较容易解决,只需在查询语句中使用distinct关键字去重,几乎所有数据库系统都支持distinct操作.发生这种重复的原因主要是表设计不周,通过给表增加主键或唯一索引列即可避免. select distinct * from t; 对于第二类重复问题,通常要求查询出重复记录中的任一条记录.假设表t有id,name,address三个字段,id是主键,有重

  • Java替换int数组中重复数据的方法示例

    本文实例讲述了Java替换int数组中重复数据的方法.分享给大家供大家参考,具体如下: package test; import java.util.HashSet; public class TestList { /** * 根据传递过来的参数过滤掉重复数据 * @param number:需要过滤掉的数据 * @return:筛选好的新数组 */ public static int[] Filter(int[] number){ HashSet<Integer> hs=new HashSe

  • JS实现的数组去除重复数据算法小结

    JS实现的数组去除重复数据算法小结

    本文实例讲述了JS实现的数组去除重复数据算法.分享给大家供大家参考,具体如下: 在JS中经常会遇到去除数组中重复数据的需求,在此介绍四种算法以实现JS数组去重的功能. 1. 速度最快算法:对象键值对法 实现思路:新建一js对象以及新数组,遍历传入数组时,判断值是否为js对象的键,不是的话给对象新增该键并放入新数组. //注意点: 判断 是否为js对象键时,会自动对传入的键执行"toString()",不同的键可能会被误认为一样:例如: a[1].a["1"] .解决

随机推荐