私は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。 引用符を付けて試したり付けなかったりしましたが、どちらも機能しません。 どうすればいいですか?
ベストアンサー1
もう少し「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;
}
);