ngRepeat 사용시 표시되는 결과 수 제한
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');
얼마나 많은 전화를 표시해야하는지 숫자로 하드 코딩 할 수 있습니다. 입력하면 55가 표시됩니다. 내가하고 싶은 것은보기에서 해당 입력의 숫자를 읽고 data.splice줄에 넣는 것입니다 . 따옴표를 사용하거나 사용하지 않고 시도했지만 작동하지 않습니다. 어떻게해야합니까?
약간 더 "Angular 방식"은 Angular limitTo에서 기본적으로 제공 하는 간단한 필터 를 사용하는 것입니다 .
<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에서 필터를 제한하는 또 다른 방법입니다. 예를 들어 limitTo : 3을 사용하는 것보다 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로 변경하십시오.
ng-repeat에 제한된 수의 결과를 표시하려면 limitTo 필터를 사용하십시오.
<ul class="phones">
<li ng-repeat="phone in phones | limitTo:5">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
Another (and I think better) way to achieve this is to actually intercept the data. limitTo is okay but what if you're limiting to 10 when your array actually contains thousands?
When calling my service I simply did this:
TaskService.getTasks(function(data){
$scope.tasks = data.slice(0,10);
});
This limits what is sent to the view, so should be much better for performance than doing this on the front-end.
'Programing' 카테고리의 다른 글
| iPhone 시뮬레이터에 .ipa 파일을 설치하는 방법 (0) | 2020.06.14 |
|---|---|
| Gson for Java를 사용한 JSON 구문 분석 (0) | 2020.06.14 |
| Windows 배치 파일에서 무한 루프를 만드는 방법은 무엇입니까? (0) | 2020.06.14 |
| iOS에서 인터넷 연결을 감지하는 가장 쉬운 방법은 무엇입니까? (0) | 2020.06.14 |
| isKindOfClass와 isMemberOfClass의 iOS 차이점 (0) | 2020.06.14 |