根据第二个数组的长度对数组进行 ng-repeat

Posted 2023-03-05

【中文标题】根据第二个数组的长度对数组进行 ng-repeat

【英文标题】：ng-repeat on array based on length of second array

【发布时间】：2016-10-22 18:55:18

【问题描述】：

我正在尝试使用 ng-repeat 遍历数组以显示在列表中。要显示的记录数应等于第二个数组的长度。

 <ul>
  <li ng-repeat="item in firstArray"></li>
 </ul>

 var firstArray = ["a","b","c","d","e","f"]
 var secondArray = ["x","y","z"]

上述示例的预期结果：

 var output = ["a","b","c"]

由于 secondArray 的长度为 3，因此 li 元素的数量将是 3，其中前三个值来自 firstArray。

我应该使用过滤器吗？我正在使用 angularjs。

谢谢

【参考方案1】：

只需遍历您的第二个数组并使用firstArray[$index] 访问第一个数组的项目。

angular.module('myApp', [])
.controller('myCtrl', function ($scope) 
	$scope.firstArray = ["a","b","c","d","e","f"];
    $scope.secondArray = ["x","y","z"];
);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <ul>
            <li ng-repeat="i in secondArray">
                firstArray[$index]
            </li>
        </ul>
    </div>
</div>

【讨论】：

并且在途中访问第一个数组的不存在元素并生成需要的许多li

【参考方案2】：

您可以在 ng-repeat 中使用 AngularJs 过滤器 limitTo。参考下面的例子：

在角度应用方面：

    var app = angular.module('sampleapp', [])
    app.controller('samplecontrol', function ($scope) 
        $scope.firstArray = ["a","b","c","d","e","f"]
        $scope.secondArray = ["x","y","z"]
    );

在你看来：

<ul>
    <li ng-repeat="item in firstArray | limitTo:secondArray.length">item</li>
</ul>

【参考方案3】：

也许你应该使用 $index 来测试它是否必须显示：

<ul >
     <li ng-repeat="item in firstArray" ng-if="$index < secondArray.length()" > </li>
 </ul>

【参考方案4】：

<ul>
  <li ng-repeat="item in firstArray" ng-if=" $index < secondArray.length "></li>
</ul>

使用上面的代码，它会工作

【讨论】：

这是不明智的表现，而不是只渲染所需数量的元素，您将使用ngIf 创建多个观察者来比较每个 $digest 周期中的 $index 和数组长度

【参考方案5】：

最简单的解决方案是使用limitTo

<ul>
  <li ng-repeat="item in firstArray | limitTo:secondArray.length">item</li>
</ul>

http://plnkr.co/edit/LWh1uqNPxTy09u3MP677?p=preview