使用 ngRepeat 时限制显示的结果数

我发现 AngularJS 教程很难理解; 这个程序正在教我如何构建一个显示手机的应用程序。我在 步骤5上，我想作为一个实验，我会尝试让用户指定他们希望看到多少。视图是这样的:

<body ng-controller="PhoneListCtrl">


<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->


Search: <input ng-model="query">
How Many: <input ng-model="quantity">
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>


</div>
<div class="span10">
<!--Body content-->


<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>


</div>
</div>
</div>
</body>

我添加了这一行，用户可以输入他们希望显示的结果数:

How Many: <input ng-model="quantity">

这是我的控制器:

function PhoneListCtrl($scope, $http) {
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data.splice(0, 'quantity');
});


$scope.orderProp = 'age';
$scope.quantity = 5;
}

重要的一点是:

$scope.phones = data.splice(0, 'quantity');

我可以硬编码一个数字来表示应该显示多少部手机。如果我把 5放进去，会显示5。我所要做的就是从视图中读取输入中的数字，并将其放在 data.splice行中。我试过引用和不引用，但都没用。我该怎么做？

198799 次浏览
小开

最初存储所有数据

function PhoneListCtrl($scope, $http) {
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data.splice(0, 5);
$scope.allPhones = data;
});


$scope.orderProp = 'age';
$scope.howMany = 5;
//then here watch the howMany variable on the scope and update the phones array accordingly
$scope.$watch("howMany", function(newValue, oldValue){
$scope.phones = $scope.allPhones.splice(0,newValue)
});
}

EDIT 不小心把手表放在了控制器外面，它本应该在里面的。

小开
最佳答案

稍微多一点的“角度方式”是使用简单的 limitTo滤波器，由角度提供:

<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp | limitTo:quantity">
\{\{phone.name}}
<p>\{\{phone.snippet}}</p>
</li>
</ul>

app.controller('PhoneListCtrl', function($scope, $http) {
$http.get('phones.json').then(
function(phones){
$scope.phones = phones.data;
}
);
$scope.orderProp = 'age';
$scope.quantity = 5;
}
);

PLUNKER

小开

虽然有点晚了，但是这招对我很管用，希望其他人能用得上。

<div ng-repeat="video in videos" ng-if="$index < 3">
...
</div>
小开

另一种(我认为更好的)实现方法是实际拦截数据。LimitTo 是可以的，但是如果数组实际上包含数千个，而您将其限制为10会怎么样呢？

当我打电话给我的服务时，我只是这样做:

TaskService.getTasks(function(data){
$scope.tasks = data.slice(0,10);
});

这限制了发送到视图的内容，因此对于性能而言，这比在前端执行此操作要好得多。

小开

在我的例子中，如果您有对象或多维数组，那么这个工作得更好。它将只显示第一个项目，其他将只是在循环中忽略。

.filter('limitItems', function () {
return function (items) {
var result = {}, i = 1;
angular.forEach(items, function(value, key) {
if (i < 5) {
result[key] = value;
}
i = i + 1;
});
return result;
};
});

在你想要的东西上改变5。

小开

使用 limTo 过滤器在 ng-repeat 中显示有限数量的结果。

<ul class="phones">
<li ng-repeat="phone in phones | limitTo:5">
\{\{phone.name}}
<p>\{\{phone.snippet}}</p>
</li>
</ul>
小开

这里有另一种方法来限制您的过滤器在 html，例如，我想显示3列表的时间比我将使用 限制: 3

  <li ng-repeat="phone in phones | limitTo:3">
<p>Phone Name: \{\{phone.name}}</p>
</li>

提交答案