Question

我正在使用角度过滤器来搜索列表。搜索使用过滤器工作正常，但问题是我还有一个复选框（'全选'）这个复选框也正在执行其行动正常，但当我搜索列表，如果我只得到六个中的两个元素和然后我检查我的'选择框'，行中的其他四个元素也会被检查。我想避免这种情况。我的代码如下：

HTML

<select-all-checkbox checkboxes="editResource.allowedUsersList" all-selected="allSelectedWtUsers" all-clear="noSelectedWtUsers" multiple="multipleWtUsers" ids="selectedWUsersIds"></select-all-checkbox>
    <input type='text' ng-model="name" placeholder="search"/>
    <div class="col-sm-12" ng-repeat="allowedUser in editResource.allowedUsersList | filter:{firstName:name}"></div>

指令：该指令用于选择复选框。

directive('selectAllCheckbox', function () {
                        return {
                            replace: true,
                            restrict: 'E',
                            scope: {
                                checkboxes: '=',
                                allselected: '=allSelected',
                                allclear: '=allClear',
                                multiple: '=multiple',
                                ids: '=ids'
                            },
                            template: '<input type="checkbox" class="input-checkbox" ng-model="master" ng-change="masterChange()">',
                            controller: function ($scope, $element) {
                                $scope.masterChange = function () {
                                    if ($scope.master) {
                                        angular.forEach($scope.checkboxes, function (cb, index) {
                                            cb.isSelected = true;
                                        });
                                    } else {
                                        angular.forEach($scope.checkboxes, function (cb, index) {
                                            cb.isSelected = false;
                                        });
                                    }
                                };
                                $scope.$watch('checkboxes', function (newVal,oldVal) {
                                    if(newVal !== oldVal){
                                         var allSet = true,allClear = true,countSelected = 0;
                                            $scope.ids = [];
                                            angular.forEach($scope.checkboxes, function (cb, index) {
                                                if(cb.isSelected){
                                                    countSelected ++;
                                                    $scope.ids.push(cb.id);
                                                }
                                                if (cb.isSelected) {
                                                    allClear = false;
                                                } else {
                                                    allSet = false;
                                                }
                                            });
                                            if(countSelected > 1){
                                                $scope.multiple = true
                                            }else{
                                                $scope.multiple = false
                                            }
                                            if ($scope.allselected !== undefined) {
                                                $scope.allselected = allSet;
                                            }
                                            if ($scope.allclear !== undefined) {
                                                $scope.allclear = allClear;
                                            }

                                            $element.prop('indeterminate', false);
                                            if (allSet) {
                                                $scope.master = true;
                                            } else if (allClear) {
                                                $scope.master = false;
                                            } else {
                                                $scope.master = false;
                                                $element.prop('indeterminate', true);
                                            }
                                    }
                                }, true);
                            }
                        };
                    });

基本上我想要的是，如果我搜索我的项目列表，我的项目列表长度为20，我使用过滤器得到4项，那么我的列表应该是大小4，如果我清除我的搜索框，那么我的项目列表应该再次成为大小为20.

最重要的一点是，如果我在搜索框中按某些键后得到4个项目，如果我删除1个项目并再次清除我的搜索框，那么我应该得到我的列表中的19个项目。

希望您了解我的问题。任何人都可以帮助我。

Answer 1

我会用控制器（过滤控制器中的列表）来做到这一点：

http://codepen.io/jlowcs/pen/YPvvMX

HTML：

<div ng-controller="exampleCtrl">
  <label><select-all-checkbox checkboxes="filteredList" all-selected="allSelectedWtUsers" all-clear="noSelectedWtUsers" multiple="multipleWtUsers" ids="selectedWUsersIds"></select-all-checkbox>select all</label>
  <br>
  <input type='text' ng-model="name" placeholder="search"/>
  <br>
  Filtered:
  <div class="col-sm-12" ng-repeat="allowedUser in filteredList">
    <input type="checkbox" ng-model="allowedUser.isSelected"> {{allowedUser.firstName}} {{allowedUser.lastName}}
  </div>
  <br>
  All:
  <div class="col-sm-12" ng-repeat="allowedUser in editResource.allowedUsersList">
    <input type="checkbox" ng-model="allowedUser.isSelected"> {{allowedUser.firstName}} {{allowedUser.lastName}}
  </div>
</div>

JS：

angular.module('exampleApp', [])
.controller('exampleCtrl', function ($scope) {
  $scope.editResource = {
    allowedUsersList: [
      {firstName: 'Joe', lastName: 'Smith', isSelected: false},
      {firstName: 'John', lastName: 'Parker', isSelected: false},
      {firstName: 'Jim', lastName: 'Smith', isSelected: false}
    ]
  };

  $scope.$watch('name', function () {
    $scope.filteredList = $scope.$eval('editResource.allowedUsersList | filter:{firstName:name}');  
  })  
})
.directive('selectAllCheckbox', function () {
  return {
    replace: true,
    restrict: 'E',
    scope: {
      checkboxes: '=',
      allselected: '=allSelected',
      allclear: '=allClear',
      multiple: '=multiple',
      ids: '=ids'
    },
    template: '<input type="checkbox" class="input-checkbox" ng-model="master" ng-change="masterChange()">',
    controller: function ($scope, $element) {
      $scope.masterChange = function () {
        if ($scope.master) {
          angular.forEach($scope.checkboxes, function (cb, index) {
            cb.isSelected = true;
          });
        } else {
         angular.forEach($scope.checkboxes, function (cb, index) {
            cb.isSelected = false;
          });
        }
      };
      $scope.$watchCollection('checkboxes', function (newVal,oldVal) {
        if(newVal !== oldVal){
          var allSet = true,allClear = true,countSelected = 0;
          $scope.ids = [];
          angular.forEach($scope.checkboxes, function (cb, index) {
            if(cb.isSelected){
              countSelected ++;
              $scope.ids.push(cb.id);
            }
            if (cb.isSelected) {
              allClear = false;
            } else {
              allSet = false;
            }
          });
          if(countSelected > 1){
            $scope.multiple = true
          }else{
            $scope.multiple = false
          }
          if ($scope.allselected !== undefined) {
            $scope.allselected = allSet;
          }
          if ($scope.allclear !== undefined) {
            $scope.allclear = allClear;
          }

          $element.prop('indeterminate', false);
          if (allSet) {
            $scope.master = true;
          } else if (allClear) {
            $scope.master = false;
          } else {
            $scope.master = false;
            $element.prop('indeterminate', true);
          }
        }
      }, true);
    }
  };
});

angular.bootstrap(document, ['exampleApp']);

有问题的角度过滤器，以搜索列表

1 个答案: