Question

我正在尝试制作过滤功能。过滤按预期工作，但分页不更新。当我点击“移动电话”复选框时，它会在第一页显示一条记录，在第二页显示两条记录，依此类推。此外，页面计数不会根据搜索结果进行更新。

如何解决这个问题？

的index.html

    <!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
<body ng-app="ngTest" ng-controller="testCtrl" ng-cloak >

<div class="container">
    <div class="row">

        <input type="text" ng-model="searchFilter">

        <input type="checkbox" ng-click="includeType('Tablet')"  >Tablet
        <input type="checkbox" ng-click="includeType('Mobile Phone')"  >Mobile Phone

        <input type="checkbox" ng-click="includeDistrict('Galle')"  >Galle
        <input type="checkbox" ng-click="includeDistrict('Kandy')"  >Kandy



    </div>


    <div class="row">
        <h4>{{ads.length}} total</h4>

        <div class="col-lg-12" ng-repeat="ad in filteredAds | filter:searchFilter | filter:typeFilter | filter:districtFilter"   style="border:1px solid #d84530; margin-bottom:20px;">

            <p >Post Id: {{ad.post_id}}<br/>
                User Id: {{ad.user_id}}<br/>
                District: {{ad.district}}<br/>
                Town: {{ad.town}}<br/>
                Brand: {{ad.brand}}<br/>
                Model: {{ad.model}}<br/>
                Type: {{ad.type}}<br/>
                Auth: {{ad.auth}}<br/>
                Condition: {{ad.condition}}<br/>
                Trade: {{ad.trade}}<br/>
                Price: {{ad.price}}</p>


        </div>
        <uib-pagination ng-model="currentPage" total-items="ads.length"  items-per-page="numPerPage" max-size="maxSize" boundary-links="true"></uib-pagination>
        <p>{{ads.length}} and {{maxSize}} and {{currentPage}}</p>

    </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.4.js"></script>
<script src="app.js"></script>
<script src="script.js"></script>


</body>


</html>

app.js

angular.module("ngTest",['ui.bootstrap'])

的script.js

    (function(){
    "use strict";
    angular
        .module("ngTest")
        .controller("testCtrl",function($scope, $http){

           $http.get('test.json').then(function(result){

                $scope.filteredAds = [];
                   $scope.currentPage = 1;
                   $scope.numPerPage = 2;
                   $scope.maxSize = 5;



                  $scope.ads = result.data;
               $scope.$watch('currentPage + numPerPage', function() {
                   var begin = (($scope.currentPage - 1) * $scope.numPerPage)
                       , end = begin + $scope.numPerPage;

                  $scope.filteredAds = $scope.ads.slice(begin,end);
               });





               $scope.typeIncludes = [];
               $scope.includeType = function(type) {
                   var i = $.inArray(type, $scope.typeIncludes);
                   if (i > -1) {
                       $scope.typeIncludes.splice(i, 1);
                   } else {
                       $scope.typeIncludes.push(type);
                   }
               }

               $scope.typeFilter = function(ads) {
                   if ($scope.typeIncludes.length > 0) {
                       if ($.inArray(ads.type, $scope.typeIncludes) < 0)
                           return;
                   }

                       return ads;

               }

               $scope.districtIncludes = [];
               $scope.includeDistrict = function(district) {
                   var i = $.inArray(district, $scope.districtIncludes);
                   if (i > -1) {
                       $scope.districtIncludes.splice(i, 1);
                   } else {
                       $scope.districtIncludes.push(district);
                   }
               }

               $scope.districtFilter = function(ads) {
                   if ($scope.districtIncludes.length > 0) {
                       if ($.inArray(ads.district, $scope.districtIncludes) < 0)
                           return;
                   }

                   return ads;
               }




           });


        });

})();

http://plnkr.co/edit/RV6pQYMTzETZGNKdAFGb?p=preview

Answer 1

也许这是一个风格问题，但我不会使用过滤器来消除集合中的数据。我倾向于在将数据提供给视图之前处理控制器或服务中的数据。

此外，根据我的经验，为观察的集合分配一个新值是不好的：原始参考丢失并且AngularJS感到困惑。
因此，我宁愿操纵原始数组，从中插入或删除项目。

点击复选框时，分页不会改变

1 个答案: