小编Ben*_*Ben的帖子

这是场景:

我正在使用带有Angular JS和Boostrap UI的ASP.NET MVC站点.我有一个动态ul列表,由通过控制器调用AngularJS提供的数据填充,通过输入搜索框过滤该列表.该列表还通过分页(UI Bootstrap控件)进行控制,我已设置为每页显示10个结果,列出100个左右的项目.当用户在搜索框中键入时,此列表会被过滤,但我希望更新分页,因此请考虑以下示例:

该列表有10页项目(100项),用户在输入搜索框中键入一些文本,将列表过滤到20个左右的项目,因此分页应从10页更新为2页.

我认为必须在某个地方设置一个$ watch设置,可能在列表项目被过滤后再更新分页页数,但是我对AngularJS很新,所以有人可以向我解释如何做到这一点吗？

非常感谢.我在下面发布了我的代码:

<div data-ng-app="dealsPage">
<input type="text" data-ng-model="cityName" />
<div data-ng-controller="DestinationController">
    <ul>
        <li data-ng-repeat="deals in destinations | filter: cityName |
            startFrom:currentPage*pageSize | limitTo:pageSize">{{deals.Location}}</li>
    </ul>
    <br />
    <pagination rotate="true" num-pages="noOfPages" current-page="currentPage" 
                max-size="maxSize" class="pagination-small" boundary-links="true"></pagination>
</div>

 var destApp = angular.module('dealsPage', ['ui.bootstrap', 'uiSlider']);
destApp.controller('DestinationController', function ($scope, $http) {
    $scope.destinations = {};
    $scope.currentPage = 1;
    $scope.pageSize = 10;

    $http.get('/Deals/GetDeals').success(function (data) {
        $scope.destinations = data;
        $scope.noOfPages = data.length / 10;
        $scope.maxSize = 5;
    });
});

destApp.filter('startFrom', function () …