Question

以下是该方案：

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

该列表有10页项目（100项），用户在输入搜索框中键入一些文本，将列表过滤到20个左右的项目，因此分页应从10页更新为2页。 / p>

我认为必须在某处设置一个$ 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 () {
    return function (input, start) {
        start = +start; //parse to int
        return input.slice(start);
    };
});

Answer 1

由于您的分页是链式过滤器的组合，因此Angular不知道在cityName更改时，它应该将currentPage重置为1.您需要自己处理它$watch。

您还需要调整startFrom过滤条件以说明(currentPage - 1) * pageSize，否则，请始终从第2页开始。

一旦实现这一目标，您就会注意到您的分页不准确，因为它仍然基于destination.length，而不是过滤的目的地子集。为此，您需要将过滤逻辑从视图移动到控制器，如下所示：

http://jsfiddle.net/jNYfd/

HTML

<div data-ng-app="dealsPage">
    <input type="text" data-ng-model="cityName" />
    <div data-ng-controller="DestinationController">
        <ul>
            <li data-ng-repeat="deals in filteredDestinations | startFrom:(currentPage - 1)*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>

的JavaScript

var destApp = angular.module('dealsPage', ['ui.bootstrap']);

destApp.controller('DestinationController', function ($scope, $http, $filter) {
    $scope.destinations = [];
    $scope.filteredDestinations = [];

    for (var i = 0; i < 1000; i += 1) {
        $scope.destinations.push({
            Location: 'city ' + (i + 1)
        });
    }

    $scope.pageSize = 10;
    $scope.maxSize = 5;

    $scope.$watch('cityName', function (newCityName) {
        $scope.currentPage = 1;
        $scope.filteredDestinations = $filter('filter')($scope.destinations, $scope.cityName);
        $scope.noOfPages = $scope.filteredDestinations.length / 10;
    });
});

destApp.filter('startFrom', function () {
    return function (input, start) {
        start = +start; //parse to int
        return input.slice(start);
    };
});

Answer 2

在jsfiddle上共享的版本与ui-bootstrap 0.5.0兼容，但从0.6.0开始就有了重大变化。

以下是使用以下库的版本：

angular 1.2.11
angular-ui-bootstrap 0.10.0
bootstrap 3.1.0

以下是同一个人：

Angular UI Bootstrap Pagination

Answer 3

您好我尝试使用Angular Fire将其与Firebase挂钩，它只在我在搜索输入中输入内容后才能生效。在$ scope。$ watch方法中，我使用Angular Fire的orderByPriorityFilter将对象转换为数组。

$scope.$watch('search', function(oldTerm, newTerm) {
  $scope.page = 1;
  // Use orderByPriorityFilter to convert Firebase Object into Array
  $scope.filtered = filterFilter(orderByPriorityFilter($scope.contacts), $scope.search);
  $scope.lastSearch.search = oldTerm;
  $scope.contactsCount = $scope.filtered.length;
});

初始加载不会加载任何联系人。这是在我开始输入输入搜索字段之后。

由于在输入文本框上进行过滤而导致绑定列表更改时，角度分页不会更新

3 个答案: