ngRepeat - 限制显示的结果数 [英] ngRepeat - limiting number of displayed results
问题描述
我是一个巨大的AngularJS的n00b而且我发现即使是教程很难理解。本教程是走在我通过建立，显示手机的应用程序。我在第5步，我认为作为一个实验我想尝试，允许用户指定多少，他们会喜欢被显示。视图看起来是这样的：
I'm a huge AngularJS n00b and am finding even the tutorials hard to understand. This tutorial is walking me through building an app that displays phones. I'm on step 5 and I thought as an experiment I'd try to allow users to specify how many they'd like to be shown. The view looks like this:
<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>
我添加这一行，用户可以输入他们有多少结果表明希望：
I've added this line that users can enter how many results they want shown:
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，'量'）;
The important line is: $scope.phones = data.splice(0, 'quantity');
我可以硬code在一些重present许多手机应该如何显示。如果我把5,5将被显示。所有我想要做的是阅读，从认为，输入号码，放进了data.splice线。我试着和不带引号，也不工作。我该怎么做呢？
I can hard-code in a number to represent how many phones should be shown. If I put 5 in, 5 will be shown. All I want to do is read the number in that input from the view, and put that in the data.splice line. I've tried with and without quotes, and neither work. How do I do this?
推荐答案
略多角办法将是使用简单的 limitTo 过滤器时，本机由角提供
Slightly more "Angular way" would be to use the straightforward limitTo filter, as natively provided by Angular:
<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
这篇关于ngRepeat - 限制显示的结果数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
