限制数组，角度答案

【问题标题】：Limit array, angular限制数组，角度
【发布时间】：2016-10-23 20:22:07
【问题描述】：

试图限制数组的输出。 list 是数据对象中的数组。

<tr ng-repeat="item in data.list" ng-if=""><td>{{item.data.attribute}}</td></tr>

可以用 ng-repeat 做吗？

【问题讨论】：

如果你想在ng中使用-如果你可以使用$index..

标签： javascript angularjs ng-repeat angularjs-filter

【解决方案1】：

我认为，最好的方法是使用limitTo

<tr ng-repeat="item in data.list |limitTo:quantity"><td>{{item.data.attribute}}</td></tr>

quantity 是您的限制。你也可以使用：

<tr ng-repeat="item in data.list" ng-if="$index < quantity"><td>{{item.data.attribute}}</td></tr>

但这不是最好的解决方案，因为如果它是一个大数组，这将比使用 limitToFilter 效率低，因为可能必须评估每个项目，另外一件事ng-if，在这种情况下，不会呈现@987654326 $index 大于quantity 的转发器的@。如果转发器中的$index 是0, 1, or 2 orquantity，则条件为真并创建DOM 节点。 ng-if 与 ng-hide 的不同之处在于元素不会添加到 DOM 中

还有一件事，你可以给你的控制器添加过滤器

.filter('limitItems', function () {/*CODE OF YOUR FILTER FUNCTION*/})

【讨论】：

【解决方案2】：

首先删除ng-if。然后使用开箱即用的angular提供的limitTo过滤器。

ng-repeat="item in data.list | limitTo: 4 as filtered"

您也可以在控制器内部使用相同的过滤器。

var limit = 5;
$scope.filteredData = $filter('limitTo')($scope.data.list)(limit);

【讨论】：