Angularjs 单击复选框时分页不更改_Angularjs

Angularjs 单击复选框时分页不更改

angularjs

Angularjs 单击复选框时分页不更改,angularjs,Angularjs,我正在尝试做一个过滤函数。筛选按预期工作，但分页未更新。当我点击“手机”复选框时，第一页显示一条记录，第二页显示两条记录，依此类推。。此外，页面计数不会根据搜索结果进行更新如何解决这个问题 Index.html <!DOCTYPE html> <html > <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed

我正在尝试做一个过滤函数。筛选按预期工作，但分页未更新。当我点击“手机”复选框时，第一页显示一条记录，第二页显示两条记录，依此类推。。此外，页面计数不会根据搜索结果进行更新

如何解决这个问题

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>

script.js

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

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




           });


        });

})();

（函数（）{
“严格使用”；
有棱角的
.模块（“ngTest”）
.controller（“testCtrl”，函数（$scope，$http）{
$http.get（'test.json'）。然后（函数（结果）{
$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（开始，结束）；
});
$scope.typeIncludes=[]；
$scope.includeType=函数（类型）{
var i=$.inArray（类型，$scope.typeIncludes）；
如果（i>-1）{
$scope.typeIncludes.拼接（i，1）；
}否则{
$scope.typeIncludes.push（类型）；
}
}
$scope.typeFilter=函数（ads）{
如果（$scope.typeIncludes.length>0）{
if（$.inArray（ads.type，$scope.typeIncludes）<0）
返回；
}
返回广告；
}
$scope.districtcludes=[]；
$scope.includeDistrict=功能（地区）{
变量i=$.inArray（地区，$scope.districtIncludes）；
如果（i>-1）{
$scope.分区包括拼接（i，1）；
}否则{
$scope.districtcludes.push（地区）；
}
}
$scope.districtFilter=函数（ads）{
如果（$scope.districtcludes.length>0）{
如果（$.inArray（ads.district，$scope.districtcludes）<0）
返回；
}
返回广告；
}
});
});
})();

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

此外，根据我的经验，为关注的集合指定一个新值是不好的：原始引用丢失，AngularJS混淆。
因此，我宁愿操纵原始数组，从中插入或删除项