각도로 ng-repeat을 사용하여 100개 중 6개에서 10개까지의 결과를 필터링합니다.JS
아, 그렇군요.limitTo첫 번째 5개 또는 마지막 5개의 결과를 제한할 수 있습니다.다만, 5개의 결과의 두 번째 세트를 표시할 수 있도록, 제한의 시작점을 설정합니다.
거기에 필터가 내장되어 있나요?
Angular 1.4.0 이후 필터는 옵션입니다.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 실장 전체를 도용하기만 하면 됩니다.
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>
블루스크린에서 말한 바와 같이 이 작업은limitTo필터, 다만 Harry Oosterven이 발견한 마지막 페이지 문제를 처리하려면 약간의 추가 작업이 필요합니다.
즉, UI 부트스트랩 사용 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>
이 예는 Angular의 두 번째 단계를 기반으로 합니다.JS 튜토리얼
제한이 불분명한 일반적인 경우를 커버하려면 오프셋용 필터를 첫 번째 필터로 넣어야 합니다.
블루스크린 답변에서:
<div ng-repeat="item in items | limitTo: 10 | limitTo: -5">{{item}}</div>
N번째 항목을 마지막 항목까지 가져가야 하는 시나리오도 있을 수 있습니다. 이것은 제한을 사용하는 또 다른 방법입니다.수신인:
<div ng-repeat="item in items | limitTo:-(items.length-5)>{{item}}</div>
마이너스 기호는 마지막에서 items.length만큼 가져옵니다.그러면 괄호 안의 마이너스 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-flash에 다음과 같이 사용합니다.
ng-repeat="item in items | startFrom: 5 | limitTo:5
이렇게 하면 "AngularJs 필터의 정신"에 따라 테스트 가능하며 필요에 따라 몇 가지 "추가" 논리를 가질 수 있습니다.
@bluescreen의 ans와 @Brandon의 ans는 동일하지 않습니다.
예를 들어 다음과 같습니다.
var pageSize = 3;
var page = 2;
var items = [1, 2, 3, 4];
--
item in items | limitTo: page*pageSize | limitTo: -1*pageSize
생산 [2, 3, 4]
item in items | slice: (page-1)*pageSize : page*pageSize
생산 [4]
Ionic 베이스의 프로젝트의 경우는, 이하에 솔루션을 참조해 주세요.
메인 페이지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.controller:
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
}
});
언급URL : https://stackoverflow.com/questions/14796087/filter-results-6-through-10-of-100-with-ng-repeat-in-angularjs
'sourcecode' 카테고리의 다른 글
| 약속을 여러 번 해결하는 것이 안전한가? (0) | 2023.03.14 |
|---|---|
| Google Angular 지도JS (0) | 2023.03.14 |
| 지도 함수 내에서 "this"가 정의되지 않았습니다. Reactjs (0) | 2023.03.14 |
| MongoDB BSON 문서 크기 제한에 대해 (0) | 2023.03.14 |
| React 구성 요소 디렉토리에서 index.js 파일은 어떻게 작동합니까? (0) | 2023.03.14 |