由于对输入文本框进行过滤，当绑定列表发生变化时，角度分页不会更新

本文介绍了由于对输入文本框进行过滤，当绑定列表发生变化时，角度分页不会更新的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

场景如下:

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

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

我认为某处必须有 $watch 设置，可能在过滤后的列表项上然后更新分页页数，但是我对 AngularJS 还很陌生，所以有人可以向我解释一下这是怎么回事完成了吗?

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

<input type="text" data-ng-model="cityName"/><div data-ng-controller="DestinationController"><ul><li data-ng-repeat="目的地交易| 过滤器:cityName |startFrom:currentPage*pageSize |limitTo:pageSize">{{deals.Location}}</li><br/><分页旋转="true" num-pages="noOfPages" current-page="currentPage"max-size="maxSize" class="pagination-small" boundary-links="true"></pagination>

 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 = 数据；$scope.noOfPages = data.length/10;$scope.maxSize = 5;});});destApp.filter('startFrom', function () {返回函数(输入，开始){开始 = + 开始；//解析为int返回 input.slice(start);};});

解决方案

因为你的分页是链式过滤器的组合，Angular 不知道当 cityName 改变时，它应该重置 currentPage 到 1.您需要使用自己的 $watch 自己处理.

您还需要将 startFrom 过滤器调整为 (currentPage - 1) * pageSize，否则，您总是从第 2 页开始.

一旦你开始，你会注意到你的分页不准确，因为它仍然基于 destination.length，而不是过滤后的目的地子集.为此，您需要像这样将过滤逻辑从视图移动到控制器:

http://jsfiddle/jNYfd/

HTML

<input type="text" data-ng-model="cityName"/><div data-ng-controller="DestinationController"><ul><li data-ng-repeat="已过滤目的地中的交易 | startFrom:(currentPage - 1)*pageSize | limitTo:pageSize">{{deals.Location}}</li><br/><pagination rotate="true" num-pages="noOfPages" current-page="currentPage" max-size="maxSize" class="pagination-small" boundary-links="true"></pagination>

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({位置:'城市' + (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 () {返回函数(输入，开始){开始 = + 开始；//解析为int返回 input.slice(start);};});

Here's the scenario:

I am using an ASP.NET MVC site with Angular JS and Boostrap UI. I have a dynamic ul list populated by data fed through a controller call to AngularJS, filtering on that list through an input search box. The list is also controlled through pagination (UI Bootstrap control) that I've setup to show 10 results per page for the list of 100 or so items. This list is filtered as the user types in the search box, however I would like the pagination to update as well so consider the following example:

The list has 10 pages of items (100 items), the user types some text in the input search box which filters the list down to 20 or so items, so the pagination should be updated from 10 pages to two pages.

I figure there must be a $watch setup somewhere, perhaps on the list items after it has been filtered and then update the pagination page count, however I'm pretty new to AngularJS so can someone please explain to me how this could be done?

Thanks very much. I have posted my code below:

<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);
    };
});

解决方案

Because your pagination is a combination of chained filters, Angular has no idea that when cityName changes, it should reset currentPage to 1. You'll need to handle that yourself with your own $watch.

You'll also want to adjust your startFrom filter to say (currentPage - 1) * pageSize, otherwise, you always start at page 2.

Once you get that going, you'll notice that your pagination is not accurate, because it's still based on destination.length, and not the filtered sub-set of destinations. For that, you're going to need to move your filtering logic from your view to your controller like so:

http://jsfiddle/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);
    };
});

这篇关于由于对输入文本框进行过滤，当绑定列表发生变化时，角度分页不会更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！