Question

我有一个HTML代码，它使用ng-repeat来显示数据。数据分为两列，每列的数据大致相同（通过链接显示）。

然而，要做到这一点，我遍历同一组数据两次，有两个不同的ng-repeat条件（第一个遍历显示第一列中的第一组数据，第二个遍历显示第二组）第二栏中的数据）。

我认为这实际上是多余的（也是耗时的），因为对于第一次遍历，我获得数据的前半部分然后跳过其余部分（通过ng-if），并且对于第二次遍历，我得到下半场。

有没有办法遍历数据一次，但仍能显示数据划分？

注意：我在第一次＆lt;之前尝试过ng-repeat。 div class =＆＃34; column＆＃34; ＆gt;，并将条件保持在＆lt; a＆gt;，但是即使是＆lt; div class =＆＃34; column＆＃34; ＆GT;重复，这不应该是这种情况。我只想要＆lt; a＆gt;标签在相应的列中重复。

代码

<div class="ui two column doubling stackable grid">
    <div class="column">
        <h5>
        <div ng-repeat="agency in agencies" ng-if="$index <= (agencies.length/2)">
            <a href="agency.html#{{agency.url | num}}">{{agency.name}}</a><br>
        </div>
        </h5>
    </div>

    <div class="column">
        <h5>
        <div ng-repeat="agency in agencies" ng-if="$index > (agencies.length/2)">
            <a href="agency.html#{{agency.url | num}}">{{agency.name}}</a><br>              
        </div>
        </h5>
    </div>
</div>

Answer 1

我的改进是使用＆＃39; limitTo＆＃39;管道，而不是ng-if。

看看这个版本，效率更高。

{{agFull = agencies.length; ""}}

{{agHalf = agFull/2; ""}}

<div class="ui two column doubling stackable grid">
    <div class="column">
        <h5>
        <div ng-repeat="agency in agencies | limitTo : agHalf">
            <a href="agency.html#{{agency.url | num}}">{{agency.name}}</a><br>
        </div>
        </h5>
    </div>

    <div class="column">
        <h5>
        <div ng-repeat="agency in agencies | limitTo : agFull : agHalf">
            <a href="agency.html#{{agency.url | num}}">{{agency.name}}</a><br>              
        </div>
        </h5>
    </div>
</div>

我还建议存储agencies.length＆amp; - 如上所述，变量中的agencies.length / 2。如果您不喜欢模板变量，也可以使用控制器。

Answer 2

由于您希望优化，我建议您在控制器中将阵列分成两个。这将消除冗余。不要让你看到控制器的工作。

<div class="ui two column doubling stackable grid">
<div class="column">
    <h5>
    <div ng-repeat="agency in agencies[0]" >
        <a href="agency.html#{{agency.url | num}}">{{agency.name}}</a><br>
    </div>
    </h5>
</div>

<div class="column">
    <h5>
    <div ng-repeat="agency in agencies[1]">
        <a href="agency.html#{{agency.url | num}}">{{agency.name}}</a><br>              
    </div>
    </h5>
</div>

在HTML代码中简化AngularJS ng-repeat循环

2 个答案: