我找到了AngularJS 教程 https://docs.angularjs.org/tutorial很难明白;这个正在引导我构建一个显示手机的应用程序。我上线了step 5 https://docs.angularjs.org/tutorial/step_05我想作为一个实验，我会尝试让用户指定他们想要显示的数量。视图如下所示：
<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线。我尝试过带引号和不带引号，但都不起作用。我该怎么做呢？
稍微更“角度的方式”是使用简单的limitTo过滤器，由 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 http://plnkr.co/edit/7pYWjCqBufRkxKEk23ev?p=preview
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
