Cap*_*ack 147 javascript model-view-controller scope angularjs
我是一个巨大的AngularJS n00b,我甚至发现教程很难理解.本教程将引导我构建一个显示电话的应用程序.我在第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行中.我试过有没有引号,也没有工作.我该怎么做呢？
Ste*_*wie 343
稍微更多的"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;
}
);
cou*_*zzi 46
派对有点晚了,但这对我有用.希望其他人发现它有用.
<div ng-repeat="video in videos" ng-if="$index < 3">
...
</div>
| 归档时间： |
|
| 查看次数： |
186096 次 |
| 最近记录： |