Question

我有一个应用过滤器的项目列表。

$scope.list = [
        {"title":"name 1", "wifi": true},
        {"title":"name 2", "wifi": true},
        {"title":"name 3", "wifi": true},
        {"title":"name 4", "wifi": false},
        ...
        {"title":"name 25", "wifi": true},
        {"title":"name 26", "wifi": true},
        {"title":"name 27", "wifi": true}
    ];

HTML code：

<div ng-controller="pageCtrl">
    <input type="text" placeholder="Search" ng-model="query" 
     typeahead="item as item.title for item in list | filter:$viewValue"/>
    <br/>
    <input type="checkbox" ng-model='search.wifi' 
     ng-true-value='true' ng-false-value='' ng-change="testv()" /> Wi Fi <hr />
    <p>Total items: {{filtered.length}}</p>
<pagination total-items="totalItems" ng-model="currentPage" max-size="maxSize"
 class="pagination-sm" boundary-links="true" num-pages="numPages" 
previous-text="&laquo;" next-text="&raquo;" first-text="First" last-text="Last"></pagination>    
    <ul>
        <li ng-repeat="data in filtered = (filteredItems | filter:search | filter:query)">{{data.title}}</li>
    </ul>
</div>

接下来，我在列表中添加了分页，但我无法使用过滤器配置页面数量的更改。

//pagination
    $scope.filteredItems = [];
    $scope.currentPage = 1;
    $scope.numPerPage = 10;
    $scope.totalItems = $scope.list.length;

    $scope.$watch("currentPage + numPerPage", function() {
      var begin, end;
      console.log("watcher init");
      begin = ($scope.currentPage - 1) * $scope.numPerPage;
      end = begin + $scope.numPerPage;
      $scope.filteredItems = $scope.list.slice(begin, end);
      console.log("$scope.filteredItems", $scope.filteredItems);
    });

我尝试使用复选框Wi fi制作更改页面，但列表未更新，并且在每个页面上保留了几个项目。过滤后如何添加正确的列表项？

//add filter
    $scope.testv = function() {
      $timeout((function() {
      $scope.maxSize = Math.ceil($scope.filtered.length / $scope.numPerPage); 
      console.log($scope.filtered.length);
      }), 10);
    };

如何在过滤后添加所有项目的正确总金额？

任何人都可以帮助我吗？谢谢你的建议！

这是示例fiddle

过滤器不能与angularjs中的分页一起使用

0 个答案: