使用 ng-repeat-start、ng-repeat-end

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

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

生成的代码是这样的:code

<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 能够解决:blog

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

生成的代码是这样的:it

<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 还能够用在其它不但愿循环外层标签的场景。也能够这样用:class

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

这样就跟使用ng-repeat的效果同样了。循环

相关文章
相关标签/搜索