AngularJS에서 ng-repeat를 사용하여 100 개 중 6-10 개 결과 필터링
내가보고 limitTo내가 처음 5, 또는 마지막 5 개 결과를 제한 할 수 있습니다 워드 프로세서에서 필터를,하지만 난 5 개 결과의 두 번째 세트를 표시 할 수 있도록 내 한계가 시작 어디 세트로합니다.
이를위한 내장 필터가 있습니까?
Angular 1.4.0부터 limitTo필터 는 선택적 begin인수를 사용합니다.
<div ng-repeat="item in items | limitTo:5:5">{{item}}</div>
이전 버전에서는 사용자 정의 필터를 작성하는 것이 매우 간단합니다. 다음은 다음을 기반으로 한 순진한 구현입니다 Array#slice(카운트 대신 첫 번째 및 마지막 인덱스를 전달 함).
app.filter('slice', function() {
return function(arr, start, end) {
return (arr || []).slice(start, end);
};
});
<div ng-repeat="item in items | slice:6:10">{{item}}</div>
jsFiddle 작동 : http://jsfiddle.net/BinaryMuse/vQUsS/
또는 다음 의 전체 Angular 1.4.0 구현을limitTo 훔칠 수 있습니다 .
function limitToFilter() {
return function(input, limit, begin) {
if (Math.abs(Number(limit)) === Infinity) {
limit = Number(limit);
} else {
limit = toInt(limit);
}
if (isNaN(limit)) return input;
if (isNumber(input)) input = input.toString();
if (!isArray(input) && !isString(input)) return input;
begin = (!begin || isNaN(begin)) ? 0 : toInt(begin);
begin = (begin < 0 && begin >= -input.length) ? input.length + begin : begin;
if (limit >= 0) {
return input.slice(begin, begin + limit);
} else {
if (begin === 0) {
return input.slice(limit, input.length);
} else {
return input.slice(Math.max(0, begin + limit), begin);
}
}
};
}
AngularJS는 이미 즉시 사용 가능한 기능을 제공합니다. limitTo 문서를주의 깊게 읽으면 한계에 대해 음수 값을 지정할 수 있습니다. 이는 끝에 N 개의 요소를 의미하므로 오프셋 5 이후 5 개의 결과를 처리하려면 다음을 수행해야합니다.
<div ng-repeat="item in items | limitTo: 10 | limitTo: -5">{{item}}</div>
고객 필터를 가지고 놀기 시작했지만 표현식 slice내부를 호출 할 수 있다는 것을 알았습니다 ng-repeat.
<div ng-repeat="item in items.slice(6, 10)">{{item}}</div>
블루 스크린이 말했듯이, Harry Oosterveen이 발견 한 마지막 페이지 문제를 limitTo처리하려면 추가 작업이 필요 하지만 필터 만 사용하여 수행 할 수 있습니다 .
즉 ui-bootstrap pagination 지시문 속성 사용 :
ng-model = page // current page
items-per-page = rpp // records per page
total-items = count // total number of records
표현식은 다음과 같아야합니다.
<div ng-repeat="item in items | limitTo: rpp * page | limitTo: rpp * page < count ? -rpp : rpp - (rpp * page - count)">{{item}}</div>
다음은 오프셋 및 제한으로 목록을 필터링하는 방법에 대한 기능적 예입니다.
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<script src="lib/angular/angular.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-controller="PhoneListCtrl">
Offset: <input type="text" ng-model="offset" value="0" /><br />
Limit: <input type="text" ng-model="limit" value="10" /><br />
<p>offset limitTo: {{offset - phones.length}}</p>
<p>Partial list:</p>
<ul>
<li ng-repeat="phone in phones | limitTo: offset - phones.length | limitTo: limit">
{{$index}} - {{phone.name}} - {{phone.snippet}}
</li>
</ul>
<hr>
<p>Whole list:</p>
<ul>
<li ng-repeat="phone in phones">
{{$index}} - {{phone.name}} - {{phone.snippet}}
</li>
</ul>
</body>
</html>
이 예제는 AngularJS 튜토리얼 의 두 번째 단계를 기반으로합니다 .
한계가 uknnown 인 일반적인 경우를 다루려면 오프셋에 대한 필터를 첫 번째 필터로 넣어야합니다.
블루 스크린 답변에서 :
<div ng-repeat="item in items | limitTo: 10 | limitTo: -5">{{item}}</div>
마지막 항목까지 N 번째 항목 을 가져와야 하는 시나리오를 찾을 수도 있습니다 . 이것은 limitTo를 사용하는 또 다른 방법입니다.
<div ng-repeat="item in items | limitTo:-(items.length-5)>{{item}}</div>
음수 기호는 마지막 항목에서 항목 길이만큼을 가져오고 대괄호 안의 마이너스 5는 처음 5 개 항목을 건너 뜁니다.
필터를 호출하지 않고이를 수행하는 더 깔끔한 방법이 있으며 페이지 지정자처럼 작동합니다.
$scope.page = 0;
$scope.items = [ "a", "b", "c", "d", "e", "f", "g" ];
$scope.itemsLimit = 5;
$scope.itemsPaginated = function () {
var currentPageIndex = $scope.page * $scope.itemsLimit;
return $scope.items.slice(
currentPageIndex,
currentPageIndex + $scope.itemsLimit);
};
그리고 당신의 관점에서 그것을 고수하십시오.
<ul>
<li ng-repeat="item in itemsPaginated() | limitTo:itemsLimit">{{item}}</li>
</ul>
그런 다음 증가 / 감소 할 수 있습니다 $scope.page.
$scope.page++;
다음과 같이 재사용 가능한 자체 필터 startFrom을 만들 수도 있습니다.
myApp.filter('startFrom', function () {
return function (input, start) {
start = +start;
return input.slice(start);
}
});
다음과 같이 ng-repeat에서 사용하십시오.
ng-repeat="item in items | startFrom: 5 | limitTo:5
That way it is done "in a spirit of AngularJs filters", testable, can have some "extra" logic if needed, etc.
@bluescreen's ans and @Brandon's ans are not equivalent.
for example:
var pageSize = 3;
var page = 2;
var items = [1, 2, 3, 4];
--
item in items | limitTo: page*pageSize | limitTo: -1*pageSize
produce [2, 3, 4]
item in items | slice: (page-1)*pageSize : page*pageSize
produce [4]
For Ionic based projects find the solution below:
mainpage.html:
<ion-view view-title="My Music">
<ion-content>
<ion-list>
<ion-item ng-repeat="track in tracks | limitTo: limit | limitTo: -10 ">
{{track.title}}
</ion-item>
</ion-list>
<div class="list"></div>
<div align="center">
<button class="button button-small button-positive" ng-disabled="currentPage == 0" ng-click="decrementLimit()">
Back
</button>
<button class="button button-small button-energized">
{{currentPage+1}}/{{numberOfPages()}}
</button>
<button class="button button-small button-positive" ng-disabled="currentPage >= data_length/pageSize - 1" ng-click="incrementLimit()">
Next
</button>
</div>
</ion-content>
</ion-view>
controller.js:
var myApp = angular.module('musicApp.controllers', []);
myApp.controller('AppCtrl', function($scope, $http) {
console.log('AppCtrl called');
// $scope.tracks = MusicService.query();
$http.get('api/to/be/called').then(function(result){
$scope.tracks = result.data['results'];
$scope.data_length = $scope.tracks.length;
console.log(result)
// console.log($sco pe.tracks.length)
});
var currentPage = 0;
$scope.pageSize = 10;
$scope.numberOfPages = function(){
return Math.ceil($scope.tracks.length/$scope.pageSize);
}
var limitStep = 10;
$scope.limit = limitStep;
$scope.currentPage = currentPage;
$scope.incrementLimit = function(){
$scope.limit += limitStep;
$scope.currentPage += 1
};
$scope.decrementLimit = function(){
$scope.limit -= limitStep;
$scope.currentPage -= 1
}
});
'programing tip' 카테고리의 다른 글
| UINavigationBar-프로그래밍 방식으로 제목 설정? (0) | 2020.10.13 |
|---|---|
| System.Security.Cryptography.RandomNumberGenerator 대신 C # 클래스 System.Random을 사용하는 이유는 무엇입니까? (0) | 2020.10.13 |
| 왜 strcpy 대신 strncpy를 사용해야합니까? (0) | 2020.10.13 |
| 같은 그림에 다른 데이터 프레임을 플로팅합니다. (0) | 2020.10.13 |
| UIView 흔들림 애니메이션 (0) | 2020.10.13 |