AngularJS: for loop and nested if

Question

我想使用AngularJS拥有类似以下内容的HTML代码：

<p class="itemsperpage">Items per page: <span>20</span> <span><a href="#">40</a></span> <span><a href="#">60</a></span> <span><a href="#">View all</a></span></p>

其中 20 仅由 ，因为是当前活动元素。

现在使用AngularJS，我怎么能有这样的东西：

var itemsPerPage = [20,40,60];
...
<p class="itemsperpage">Items per page:
    <span ng-repeat='i in itemsPerPage'>
        // here should print {{ i }} for the current active
        // <a href="#">{{ i }}</a> for the elements not active
    </span>
    <span><a href="#">View all</a></span>
</p>

是否可以使用AngularJS做这样的事情？

Answer 1

你可以像这样使用ng-if：

<span ng-repeat='i in itemsPerPage'>
    <span ng-if="active === i">{{i}}</span>
    <a    ng-if="active !== i" href="#">{{i}}</a>
</span>

只需将活动项目保留在$scope.active中，例如

$scope.active = 20;

Answer 2

假设first元素将处于活动状态。或者要检查条件 20，您可以将 $first 替换为 20

标记

<p class="itemsperpage">Items per page:
    <span ng-repeat='i in itemsPerPage'>
        <a href="#" ng-if="$first" ng-class="{active: $first }">{{ i }}</a> 
        <span href="#" ng-if="!$first">{{ i }}</span> 
    </span>
    <span><a href="#">View all</a></span>
</p>