使用ngRepeat时限制显示结果的数量
使用ngRepeat时限制显示结果的数量
提问于 2013-07-15 04:18:33
我发现AngularJS tutorials很难理解；这个应用程序正在引导我构建一个显示手机的应用程序。我在step 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行。我试过带引号和不带引号，但都不管用。我该怎么做呢？
回答 4
Stack Overflow用户
发布于 2014-02-15 00:07:40
参加派对有点晚了，但这对我很管用。希望其他人能发现它的用处。
<div ng-repeat="video in videos" ng-if="$index < 3">
...
</div>Stack Overflow用户
发布于 2016-04-02 06:48:46
在我的例子中，如果你有对象或多维数组，这会工作得更好。它将只显示第一个项目，其他项目在循环中将被忽略。
.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。
Stack Overflow用户
发布于 2017-11-17 20:43:02
使用limitTo过滤器在ng-repeat中显示有限数量的结果。
<ul class="phones">
<li ng-repeat="phone in phones | limitTo:5">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17643361
复制相关文章
相似问题