6

这是场景：

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

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

我认为某处必须有一个 $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);
    };
});
4

3 回答 3

12

因为您的分页是链式过滤器的组合，所以 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);
    };
});
于 2013-09-08T03:39:42.283 回答
4

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

这是使用以下库的版本：

  • 角度 1.2.11
  • 角度-ui-bootstrap 0.10.0
  • 引导程序 3.1.0

这是相同的plunker：

Angular UI 引导分页

于 2014-02-04T12:35:31.967 回答
0

您好，我尝试使用 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;
});

初始加载不加载任何联系人。只有在我开始在输入搜索字段中输入之后。

于 2014-03-30T05:29:55.307 回答