• ngrepeat 时注意的地方和一些little tricks


    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
  • 相关阅读:
    将Mat类型坐标数据生成pts文件
    DelaunayTriangulation_VoronoiDiagram_using_OpenCV的实现
    安装python第三方库
    安装wordcloud第三方库Unable to find vcvarsall.bat
    Vec3b类型数据确定颜色通道
    使用Inno Setup Compiler制作安装软件包
    QT-This application failed to start because it could not find or load the Qt platform plugin "windows"
    m函数与m文件的命名
    当前目录如何打开cmd
    [Machine Learning & Algorithm] 随机森林(Random Forest)-转载
  • 原文地址:https://www.cnblogs.com/isdom/p/webtips013.html
Copyright © 2020-2023  润新知