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

最新文章

  1. Weblogic的架构
  2. 一个简单的app自动登录Python脚本案例
  3. 查询oracle数据库中的所有表空间信息
  4. Handling events in an MVVM WPF application
  5. Docker SSH
  6. Node.js爬虫数据抓取 -- 问题总结
  7. JSTL 标签库 使用
  8. dll,lib文件的导入
  9. lower power的IP设计
  10. 直播源格式转换教程——rtmp/rtsp/http/m3u8!!
  11. gulp 中的增量编译
  12. configure JDBCRealm JAAS for mysql and tomcat 7 with form based authentication--reference
  13. 类型 - PHP手册笔记
  14. selenium操作拖拽实现无效果的替代方案
  15. 微信小程序--TabBar不出现的一种原因
  16. OCR技术浅探:基于深度学习和语言模型的印刷文字OCR系统
  17. Spring - JPA 一对一, 一对多, 多对多关联
  18. 超实用的JavaScript代码段 Item3 --图片轮播效果
  19. android TabLayout设置选中标签字体加粗功能
  20. 爬虫代理及ssl验证

热门文章

  1. float元素浮动后高度不一致导致错位的解决办方法
  2. C++ Primer 学习笔记_Chapter4 数组和指针–指针
  3. Java中的二进制运算出错问题
  4. ios 苹果内购订单验证 --- php实现
  5. A Country on Wheels【车轮上的国家】
  6. HyperLedger Fabric 1.4 区块链技术定义(2.1)
  7. POJ-3126 BFS,埃式筛选及黑科技
  8. KEIL里如何实现仿真 查看输出波形
  9. hihocoder1014 : Trie树
  10. 为什么rows这么大,在mysql explain中---写在去acumg听讲座的前一夜