zoukankan      html  css  js  c++  java
  • 使用 ng-repeat-start、ng-repeat-end

    使用ng-repeat时,ng-repeat所在的标签会被循环生成,例如:

    <dl  ng-repeat="item in [1,2,3,4,5]">
        <dt>item : {{item}}</dt>
        <dd>
            {{item}}
        </dd>
    </dl>

    生成的代码是这样的:

    <dl class="ng-scope" ng-repeat="item in [1,2,3,4,5]">
        <dt class="ng-binding">item : 1</dt>
        <dd class="ng-binding"> 1 </dd>
    </dl>
    <dl class="ng-scope" ng-repeat="item in [1,2,3,4,5]">
        <dt class="ng-binding">item : 2</dt>
        <dd class="ng-binding"> 2 </dd>
    </dl>
    <dl class="ng-scope" ng-repeat="item in [1,2,3,4,5]">
        <dt class="ng-binding">item : 3</dt>
        <dd class="ng-binding"> 3 </dd>
    </dl>
    <dl class="ng-scope" ng-repeat="item in [1,2,3,4,5]">
        <dt class="ng-binding">item : 4</dt>
        <dd class="ng-binding"> 4 </dd>
    </dl>
    <dl class="ng-scope" ng-repeat="item in [1,2,3,4,5]">
        <dt class="ng-binding">item : 5</dt>
        <dd class="ng-binding"> 5 </dd>
    </dl>

    显然不是我想要的效果,我不想要这么多的dl标签。
    这时用 ng-repeat-start、ng-repeat-end 可以解决:

    <dl>
        <dt ng-repeat-start="item in [1,2,3,4,5]">item : {{item}}</dt>
        <dd ng-repeat-end>
            {{item}}
        </dd>
    </dl>

    生成的代码是这样的:

    <dl>
        <dt ng-repeat-start="item in [1,2,3,4,5]">item : 1</dt>
        <dd ng-repeat-end=""> 1 </dd>
        <dt ng-repeat-start="item in [1,2,3,4,5]">item : 2</dt>
        <dd ng-repeat-end=""> 2 </dd>
        <dt ng-repeat-start="item in [1,2,3,4,5]">item : 3</dt>
        <dd ng-repeat-end=""> 3 </dd>
        <dt ng-repeat-start="item in [1,2,3,4,5]">item : 4</dt>
        <dd ng-repeat-end=""> 4 </dd>
        <dt ng-repeat-start="item in [1,2,3,4,5]">item : 5</dt>
        <dd ng-repeat-end=""> 5 </dd>
    </dl>

    ng-repeat-start、ng-repeat-end 还可以用在其它不希望循环外层标签的场景。也可以这样用:

    <dl>
        <dt>item</dt>
        <dd ng-repeat-start="item in [1,2,3,4,5]" ng-repeat-end>
            item :{{item}}
        </dd>
    </dl>

    这样就跟使用ng-repeat的效果一样了。

  • 相关阅读:
    java上传视频文件
    java+HTML5实现断点续传
    web+上传大文件断点续传
    javaweb项目断点续传
    CKEditor从word粘贴问题
    netback的tasklet调度问题及网卡丢包的简单分析
    linux下开启ftp的21号port
    Dubbo--简单介绍
    OpenCV2马拉松第15圈——边缘检測(Laplace算子,LOG算子)
    【打CF,学算法——一星级】Codeforces Round #313 (Div. 2) A. Currency System in Geraldion
  • 原文地址:https://www.cnblogs.com/uncleJOKER/p/5581325.html
Copyright © 2011-2022 走看看