我发现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
行中。我已经尝试了带引号和不带引号,但都没有用。我该怎么做呢?
稍微更“ Angular的方式”将是使用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;
}
);
派对晚了一点,但这对我有用。希望其他人发现它有用。
<div ng-repeat="video in videos" ng-if="$index < 3">
...
</div>
最初存储所有数据
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意外将手表放到了应该放在里面的控制器外面。
这是将筛选器限制在html上的另一种方法,例如,我想一次显示3个列表,而不是我将使用limitTo:3
<li ng-repeat="phone in phones | limitTo:3">
<p>Phone Name: {{phone.name}}</p>
</li>
如果您有对象或多维数组,这对我来说效果更好。它将仅显示第一项,其他将仅在循环中被忽略。
.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。
使用limitTo过滤器以ng-repeat显示有限数量的结果。
<ul class="phones">
<li ng-repeat="phone in phones | limitTo:5">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
实现这一目标的另一种方法(我认为更好)是实际上拦截数据。limitTo可以,但是如果数组实际包含数千个时限制为10个怎么办?
致电我的服务时,我只是这样做:
TaskService.getTasks(function(data){
$scope.tasks = data.slice(0,10);
});
这限制了发送到视图的内容,因此,与在前端执行此操作相比,它应具有更好的性能。
本文地址:http://javascript.askforanswer.com/shiyongngrepeatshixianzhixianshijieguodeshuliang.html
文章标签:angularjs , javascript , model-view-controller , scope
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
文章标签:angularjs , javascript , model-view-controller , scope
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!