Question

我是AngularJS的新手。

搜索结果可以在一个页面中显示，但为什么 下一个和上一个按钮显示？< / p>

 <input type="text" id="txtNotessearch" ng-model="search_notes" class="form-control input-sm" placeholder="SEARCH">
 ...
    <ul>
        <li ng-repeat="item in data | filter:search_notes | startFrom:currentPage*pageSize | limitTo:pageSize">
                    {{item}}
        </li>
    </ul>

如果我错了，请纠正我。

Answer 1

因为未过滤NumberOfPages。您应该使用过滤器之后的长度，而不是使用$ scope.data.length。

function MyCtrl($scope, $filter) { //Do not forget to inject $filter
    $scope.currentPage = 0;
    $scope.pageSize = 10;
    $scope.data = [];

    $scope.numberOfPages=function(){
        var myFilteredData = $filter('filter')($scope.data,$scope.search_notes); //Filter the data
        return Math.ceil(myFilteredData.length/$scope.pageSize);                
    }
    for (var i=0; i<45; i++) {
        $scope.data.push("Item "+i);
    }
}

另外，我会修改ng-disable下一个按钮

button "ng-disabled="(currentPage + 1) == numberOfPages()"

我会在change currentPage = 1上添加search_notes。

这里有小提琴 http://jsfiddle.net/rLots5zd/

Answer 2

如果您希望在结果显示在一个页面中时隐藏next和previous按钮，请在此处查看小提琴：http://jsfiddle.net/rLots5zd/3/

Angularjs - 在搜索过滤器后出现分页

2 个答案: