ngRepeat 사용 시 표시되는 결과 수 제한
Angular를 찾습니다.JS 튜토리얼은 이해하기 어려운데, 이 튜토리얼은 휴대폰을 표시하는 앱을 만드는 방법을 안내하고 있습니다.저는 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인용문이 있든 없든 시도해봤지만 둘 다 소용없었어요이거 어떻게 해?
조금 더 "각선 방식"은 직선을 사용하는 것입니다.limitToAngular에서 기본적으로 제공하는 필터:
<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>
여기 html에서 필터를 제한하는 다른 방법이 있습니다. 예를 들어 제한을 사용하는 것보다 한번에 3개의 목록을 표시하고 싶습니다.수신인: 3
<li ng-repeat="phone in phones | limitTo:3">
<p>Phone Name: {{phone.name}}</p>
</li>
모든 데이터를 초기에 저장
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가 실수로 시계를 컨트롤러 외부에 놓았습니다.
이 방법은 객체 또는 다차원 배열이 있는 경우에 더 잘 작동합니다.첫 번째 항목만 표시되며 다른 항목은 루프에서 무시됩니다.
.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>
이것을 실현하기 위한 또 다른 (더 좋은) 방법은 실제로 데이터를 가로채는 것입니다.limit To는 괜찮지만 어레이에 실제로 수천 개가 포함되어 있을 때 10개로 제한한다면 어떨까요?
서비스를 호출할 때 다음과 같이 간단히 처리했습니다.
TaskService.getTasks(function(data){
$scope.tasks = data.slice(0,10);
});
이렇게 하면 뷰로 전송되는 내용이 제한되므로 프런트 엔드에서 수행하는 것보다 성능이 훨씬 향상됩니다.
언급URL : https://stackoverflow.com/questions/17643361/limiting-number-of-displayed-results-when-using-ngrepeat
'programing' 카테고리의 다른 글
| MUI 스타일을 사용하여 부모 위로 이동할 때 자녀의 스타일을 어떻게 변경합니까? (0) | 2023.03.10 |
|---|---|
| 주 클래스 org.apache.maven을 찾거나 로드할 수 없습니다.랩퍼메이븐 래퍼 메인 (0) | 2023.03.10 |
| wp-config.php에서 값(PHP 정의 상수)을 읽으려면 어떻게 해야 하나요? (0) | 2023.03.10 |
| ORACLE의 sleep 기능 (0) | 2023.03.10 |
| org.springframework 유형의 빈을 정의하는 것을 검토합니다.보안.인증이 필요합니다.AuthenticationManager'가 설정되어 있습니다. (0) | 2023.03.10 |