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

Question

我下面有一个 HTML 代码，它利用 ng-repeat 来显示数据。数据分为两列，每列将包含或多或少相同数量的数据（通过链接显示）。

但是，为此，我遍历了同一组数据两次，使用了两个不同的 ng-repeat 条件（第一次遍历显示第一列中的第一组数据，第二次遍历显示第二列第二组数据）。

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

有没有办法只遍历一次数据，但仍然能够显示数据的 division？

注意：我试过在第一个 < div class="column" > 之前放置 ng-repeat，并保留中的条件语句，但发生的情况是即使也会重复，这不应该是这样的。我只想让标签在相应的列中重复。

代码

<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

我的改进是使用 'limitTo' 管道，而不是 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 & 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 循环

Simplify AngularJS ng-repeat looping inside HTML code

html

angularjs

angularjs-ng-repeat

semantic-ui