使用 ngRepeat 时限制显示结果的数量
[英] Limiting number of displayed results when using ngRepeat
本文介绍了使用 ngRepeat 时限制显示结果的数量的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我发现 AngularJS 教程 难以理解；这个正在引导我构建一个显示电话的应用程序.我在 第 5 步 ，我想作为一个实验，我会尝试让用户指定他们想要展示多少.视图如下所示:
<div class="container-fluid"><div class="row-fluid"><div class="span2"><!--侧边栏内容-->搜索:<input ng-model="query">多少:<input ng-model="quantity">排序方式:<选择 ng-model="orderProp"><option value="name">按字母顺序排列</option><option value="age">最新</option></选择> <div class="span10"><!--正文内容--><ul class="phones"><li ng-repeat="phone in phone | filter:query | orderBy:orderProp">{{电话名称}}<p>{{phone.snippet}}</p>
我添加了这一行，用户可以在其中输入他们想要显示的结果数量:
多少:这是我的控制器:
function PhoneListCtrl($scope, $http) {$http.get('phones/phones.json').success(function(data) {$scope.phones = data.splice(0, '数量');});$scope.orderProp = '年龄';$scope.quantity = 5;}重要的一行是:
$scope.phones = data.splice(0, '数量');我可以硬编码一个数字来表示应该显示多少个电话.如果我输入 5 ，将显示 5.我想要做的就是从视图中读取该输入中的数字，并将其放入 data.splice 行中.我试过带引号和不带引号，都不起作用.我该怎么做?
解决方案
使用简单的 limitTo 过滤器会更Angular 方式"，如 Angular 原生提供的:
<li ng-repeat="phone in phone | filter:query | orderBy:orderProp | limitTo:quantity">{{电话名称}}<p>{{phone.snippet}}</p>
app.controller('PhoneListCtrl', function($scope, $http) {$http.get('phones.json').then(功能(电话){$scope.phones = phone.data;});$scope.orderProp = '年龄';$scope.quantity = 5;});PLUNKER
I find the AngularJS tutorials hard to understand; this one 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 where users can enter how many results they want shown:
How Many: <input ng-model="quantity">
Here’s my controller:
function PhoneListCtrl($scope, $http) {
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data.splice(0, 'quantity');
});
$scope.orderProp = 'age';
$scope.quantity = 5;
}
The important line is:
$scope.phones = data.splice(0, 'quantity');
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?
解决方案
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屋！
