angularjs的一些使用经验总结,此篇文章单谈ng指令之一ngrepeat

1. ngrepeat 时报错 Duplicates in a repeater are not allowed,

正常的时候,我们表达式内的数据是类似这样的(这时不会有任何问题)

<span ng-repeat="answer in ['good answer','perfect answer', 'bad answer','not bad answer'] ">{{answer}} </span>

但一旦当我们表达式的数据取到的是类似这样的

<span ng-repeat="answer in ['aa','bb','cc','cc','bb'] track by $index">{{answer}} </span>

便会报错 Duplicates in a repeater are not allowed,
    此时他会用英文提示你 use track by 表达式
    发生此错误的原因是 ngrepeat 的 数组或者对象数组或者对象 的每个迭代项中有重复值
    因为当使用ngrepeat不加track by表达式时,默认的为 item in items is equivalent to item in items track by $id(item)
    所以出现重复值时就会报错 页面repeat的那个dom元素不会在视图里显示出来

2.ngrepeat的filter

ng-repeat指令有一个特有的filter 名为filter的filter 用来对数据内容进行具体的过滤

同时当然也可以在使用angularjs框架的一些预先内置filter,如limitto (设置只显示一个)

ng-repeat="item in items | orderBy:'oreder_prop' | filter:query | limitTo:4"  (类似这样的语法使用)

ng-repeat="course in home.my_join_course | limitTo:1"

对这个特别的名为filter的使用

<div class="box">
<div class="col-xs-12">
<div ng-init="output = [{name:'a',addr:'东京',score:22},{name:'b',addr:'西京',score:10},{name:'c',addr:'南京'},{name:'d',addr:'北京',area:'china'}]" >

        <p ng-repeat="print in output | filter: 'china' ">{{print}}</p> <!-- 只显示属性值里有china的 -->
<p ng-repeat="print in output | filter: {name:'b'} ">{{print}}</p> <!-- 只显示name属性值里有b的 --> <p ng-repeat="print in output | filter: have_score_than_15 ">{{print}}</p>
<!-- 只显示score属性大于15的 即只显示name:a,addr:东京,score:22的那项 -->
</div>
</div>
</div> $scope.have_score_than_15 = function(item) {
return item.score > 15;
}

另外再简单介绍下排序 (这点直接引用:http://www.geekcome.com/content-10-1906-1.html )如下

<div>{{ childrenArray | orderBy : 'age' }}</div>      //按age属性值进行排序,若是-age,则倒序
<div>{{ childrenArray | orderBy : orderFunc }}</div> //按照函数的返回值进行排序
<div>{{ childrenArray | orderBy : ['age','name'] }}</div> //如果age相同,按照name进行排序

此外还可以支持自定义过滤器满足一些复杂的自定义操作如

<div ng-repeat=" depart in departments | child_department "> .... </div>

appFilters.filter('child_department',function () {
return function (departments) {
var departmentId = 3;
var array = [];
$.each(departments,function(i,n){
if(n.parent_id == departmentId){
array.push(n);
}
});
return array;
}
});

3.活用 $index     $first     $middle     $last     $even     $odd

     <ul class="dropdown-menu pull-right dropdown-menu-right" >
<li app-pressdark ng-click="course_filter('','depart','全部科室')" class="dropdown-divider">全部科室</li>
<li app-pressdark ng-repeat="depart in departs | filter:{parent_id:null}" ng-click="course_filter(depart.id,'depart',depart.name)" class="{{$last?'dropdown-nodivider':'dropdown-divider'}} ">
{{depart.name}}
</li>
</ul>

在 class="{{$last?'dropdown-nodivider':'dropdown-divider'}} " 上利用三元表达式对repeat的项进行个别的样式处理

$index number iterator offset of the repeated element (0..length-1)
$first boolean true if the repeated element is first in the iterator.
$middle boolean true if the repeated element is between the first and last in the iterator.
$last boolean true if the repeated element is last in the iterator.
$even boolean true if the iterator position $index is even (otherwise false).
$odd

ngrepeat 时注意的地方和一些little tricks的更多相关文章

  1. 在angular中使用ng-repeat时数组中有重复元素,要用item in items track by $index

    在angular中使用ng-repeat时数组中有重复元素,要用item in items track by $index,不然会报错 <div class="" ng-in ...

  2. Java 中long类型转换成为int类型时可能会出错的地方

    那计算两个日期之间间隔的天数为例来说明这个问题. 下面是计算日期间隔天数的简单算法(主要出错的地方为红色标注的地方): public int getDay(String startDate, Stri ...

  3. angular 当使用ng-repeat 时出现 $$hashKey的键值对

    小问题 把: ng-repeat="item in items " 改成 : ng-repeat="item in items track by $index"

  4. Properties没有被注意的地方

    源起: 今天阅读源码时发现一个地方不理解: 为什么以下代码第10行 get() 之后value为null时还去 getProperty() 呢? org.springframework.util.Co ...

  5. oracle 使用count()函数进行分组计数时所踩的坑!

      1.情景展示 需要对id_card字段按字符长度进行分组统计并进行计数. 2.错误方式 第一步:统计出id_card字段共存在几种情况. 第一种方式:distinct 第二种方式:group by ...

  6. 面试题HTML +CSS

    HTML+CSS部分1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素?行内元素:和有他元素都在一行上,高度.行高及外边距和内边距都不可改变,文字图片的宽度不可改变,只能容纳文本或者其他 ...

  7. AngularJS 开发中常犯的10个错误

    简介 AngularJS是目前最为活跃的Javascript框架之一,AngularJS的目标之一是简化开发过程,这使得AngularJS非常善于构建小型app原型,但AngularJS对于全功能的客 ...

  8. AngularJS开发人员最常犯的10个错误

    简介AngularJS是目前最为活跃的Javascript框架之一,AngularJS的目标之一是简化开发过程,这使得AngularJS非常善于构建小型app原型,但AngularJS对于全功能的客户 ...

  9. AngularJS开发最常犯的10个错误

    简介 AngularJS是目前最为活跃的Javascript框架之一,AngularJS的目标之一是简化开发过程,这使得AngularJS非常善于构建小型app原型,但AngularJS对于全功能的客 ...

随机推荐

  1. 【Python 2 到 3 系列】 print 是函数

    v3.0 以前,print一直作为语法结构存在,他是python语法的一部分:这个理解起来可能有点蹩脚,但的确是这样. print 一直被定以为一个statement,也就是说,他跟return/tr ...

  2. laravel-多条件查询并指定key输出

    $room = DB::table('room') ->where(function($query) use($contList){ foreach ($contList as $k=>$ ...

  3. hadoop的shuffle过程

    1. shuffle: 洗牌.发牌——(核心机制:数据分区,排序,缓存): shuffle具体来说:就是将maptask输出的处理结果数据,分发给reducetask,并在分发的过程中,对数据按key ...

  4. POJ 2676 数独(DFS)

    Sudoku Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 21612   Accepted: 10274   Specia ...

  5. Numpy基础数据结构 python

    Numpy基础数据结构 NumPy数组是一个多维数组对象,称为ndarray.其由两部分组成: 实际的数据 描述这些数据的元数据 1.一维数组 import numpy as np ar = np.a ...

  6. sql查询平均下单时间

    SQL查询订单平均审核时长 今天在写一个sql,需求是算一个订单在执行状态中的各个节点的时长 比如在订单中,状态0为开始接单,状态3为已经审核,那么现在需要计算每个客服的平均审核时长 像图中所示:这个 ...

  7. [Python3.x]python3.5实现socket通讯(TCP)

    TCP连接: tcp是面向连接的一个协议,意味着,客户端和服务器开发发送数据之前,需要先握手创建一个TCP连接.TCP连接的一端与客户端套接字相互联系,另一端与服务器套接字相联系.当创建该TCP连接的 ...

  8. MySQL Group Replication数据安全性保障

    本文来自数据库内核专栏 在之前的文章中,介绍了MGR对数据可靠性.可用性和一致性的实现方案.简单来说,MGR通过基于paxos协议的多副本来实现数据的可靠性,通过多副本上的majority机制来实现可 ...

  9. 《Cracking the Coding Interview》——第2章:链表——题目7

    2014-03-18 02:57 题目:检查链表是否是回文的,即是否中心对称. 解法:我的做法是将链表从中间对半拆成两条,然后把后半条反转,再与前半条对比.对比完了再将后半条反转了拼回去.这样不涉及额 ...

  10. spring boot打war包启动Tomcat失败

    Tomcat启动失败:最后一个causy by :java.lang.NoSuchMethodError: org.apache.tomcat.util.res.StringManager.getMa ...