Angular에서 페이지 번호 업데이트필터링 후 JS

Angular에서 페이지 번호 업데이트필터링 후 JS

페이지 번호 부여는 이미 실행되어 있습니다.이제 결과를 필터링한 후 페이지를 업데이트하고 싶습니다.

폼:

<input type="text" data-ng-model="search.name" data-ng-change="filter()"/>

리스트:

<li data-ng-repeat="data in filtered = (list | filter:search) | filter:search | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">{{data.name}}</li>

페이지 번호:

<pagination data-boundary-links="true" data-num-pages="noOfPages" data-current-page="currentPage" max-size="maxSize"></pagination>

컨트롤러:

$scope.filter = function() {
    window.setTimeout(function() { //wait for 'filtered' to be changed
        $scope.noOfPages = Math.ceil($scope.filtered.length/$scope.entryLimit);
        $scope.setPage = function(pageNo) {
            $scope.currentPage = pageNo;
        };
    }, 10);
};

문제는 페이지 번호를 클릭하거나 입력란에 다음 문자를 입력하면 페이지 번호가 갱신된다는 것입니다.그래서 한 단계 늦게 업데이트 됩니다.

편집: 소스를 jsFiddle에 추가했습니다.http://jsfiddle.net/eqCWL/2/

@abject_error 응답:$timeout동작합니다.그의 제안으로 당신의 바이올린을 편집해서 jsFiddle을 만들었습니다.

경고

나는 그 해결책이 인종 조건의 형태로 더 큰 문제를 나타내고 있다고 생각한다!

filterFilter 및 $watch를 사용한jsFiddle

그리고 그 바이올린은 진짜를 위한 방법이야

그리고 여기 설명이 있다.

당신의 레이스 조건은 다음 변경사항의 처리 사이에 있습니다.search사용 가능 여부$scope.filtered.

이 인종 문제를 해결하기 위해 제거해야 할 범인은 다음과 같습니다.

ng-model="search" ng-change="filter()"

그리고.

ng-repeat="data in filtered = (list | filter:search)......."

사용.ng-change계산을 하기 위해 "filter()"를 발사하다noOfPages검색의 변경에 따라서도filtered이렇게 하면 필터링된 목록이 페이지 수를 계산하기 위한 시간 내에 준비되지 않을 수 있습니다.따라서 타임아웃과 함께 10밀리초 동안 "filter()"를 호블링하면 작동 중인 프로그램과 같은 착각을 일으킬 수 있습니다.

필요한 것은, 「관찰」하는 방법입니다.search변경 후 두 가지 모두에 대한 액세스 권한이 있는 플레이스에서 목록을 필터링합니다.$scope.filtered계산 중$scope.noOfPages경주 없이 모든 게 순차적으로 진행되죠

앵글이 저래!를 사용할 수 있습니다.filter이름이 매우 불량한 기능으로서 컨트롤러에 필터가 포함되어 있습니다.filterFilter필터 가이드 - 컨트롤러 및 서비스에서 필터 사용

컨트롤러에 주입합니다.

function pageCtrl($scope, filterFilter) {
    // ...
}

에서 사용하다$watch함수, 스코프 문서에 기재되어 있습니다.

$scope.$watch('search', function(term) {  
    // Create filtered 
    $scope.filtered = filterFilter($scope.list, term);  

    // Then calculate noOfPages
    $scope.noOfPages = Math.ceil($scope.filtered.length/$scope.entryLimit);  
})

새로운 방식을 반영하도록 템플릿을 변경합니다.DOM 필터에 더 이상 표시되지 않습니다.ng-change

<input type="text" ng-model="search" placeholder="Search"/>

그리고.

<li ng-repeat="data in filtered | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
    {{data.name}}
</li>

대신 이 지시문을 사용할 수 있습니다.

https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

코드를 깔끔하게 유지하면서 필터로 페이지 매김을 제공합니다.

훌륭한 암호에 대해 마이클 브롬리에게 찬사를 보냅니다.

$timeoutwindow.setTimeOut$timeoutAngular에서 일관되게 작동하도록 올바르게 포장되어 있습니다.

angular 진용 use use use를 $scope.$watch

$scope.$watch('search', function(term) {
    $scope.filter = function() {
        $scope.noOfPages = Math.ceil($scope.filtered.length/$scope.entryLimit);
    }
});

출처 ; http://jsfiddle.net/eqCWL/2/

데모 ; http://jsfiddle.net/eqCWL/192/

언급URL : https://stackoverflow.com/questions/16144017/update-pagination-in-angularjs-after-filtering