Question

我正在使用复选框列表，我有下一个逻辑行为：

如果选中所有项目，则选中复选框“全选”复选框
如果未选中所有选定项目之一，则也会取消选中“全选”复选框

这个逻辑很清楚。取决于检查哪个项目我将其id提取到另一个数组，然后使用此数组来获取数据的请求。

推送一切正常，但切片逻辑很奇怪。因此，我可以对数组进行切片，直到选中第一个项目，但是我取消选中第一个项目，推送和切片项目与复选框无关。

我已经用它复制了plunker，所以如果有人能帮助我找到我所缺少的东西，我感激不尽。

  $scope.modelClass = {
        selectedAll: false
        };

$scope.selectAllClass = function (array) {
     angular.forEach(array, function (item) {
            item.selected = $scope.modelClass.selectedAll;

            $scope.param =''

         });
    };

$scope.checkIfAllClassSelected = function (array) {
     $scope.modelClass.selectedAll = array.every(function (item) {
           return item.selected == true
        });
     $scope.checked = array.filter(function (item) {
           return item.selected == true
        }).length;

     angular.forEach(array, function (obj) {
           if(obj.selected == true){
                requestClass(obj)
            }
       });
   };

   var selectedClass = [];
   var requestClass = function (obj) {

         selectedClass.push(obj);

         angular.forEach(selectedClass, function (val) {
                 if (val.selected != true) {
                      selectedClass.splice(selectedClass.indexOf(val.id), 1);
                 }
                 else {
                      selectedClass = selectedClass.filter(function (elem, index, self) {
                             return index == self.indexOf(elem);
                     })
                 }
            });

          $scope.param = _.map(selectedClass, 'id')
     };




  $scope.classes = [
           {"id":4,"name":"Achievement","selected":false},
           {"id":13,"name":"Information","selected":false},
           {"id":6,"name":"Issue","selected":false},
           {"id":5,"name":"Message","selected":false},
           {"id":9,"name":"Request","selected":false}
           ]

Answer 1

逻辑对我来说很好，不知道这里有什么问题。我已经从这个post获得了第一个解决方案（看起来你正在使用第二个解决方案）并根据需要对其进行了略微修改。

$scope.model = {
    selectedClass : []
}

$scope.isSelectAll = function(){
    $scope.model.selectedClass = [];

        if($scope.master){
            $scope.master = true;

          for(var i=0;i<$scope.classes.length;i++){
                        $scope.model.selectedClass.push($scope.classes[i].id);      
                    }
                }
      else{
        $scope.master = false;
      }

   angular.forEach($scope.classes, function (item) {
            item.selected = $scope.master;
   });

   $scope.param = $scope.model.selectedClass
}

$scope.isChecked = function()   {

            var id = this.item.id;

            if(this.item.selected){

                $scope.model.selectedClass.push(id);

                if($scope.model.selectedClass.length == $scope.classes.length ){$scope.master = true;

                }
            }  else  {
                $scope.master = false;

                var index = $scope.model.selectedClass.indexOf(id);

                $scope.model.selectedClass.splice(index, 1);
            }

        $scope.param = $scope.model.selectedClass
    }  


$scope.classes = [
           {"id":4,"name":"Achievement","selected":false},
           {"id":13,"name":"Information","selected":false},
           {"id":6,"name":"Issue","selected":false},
           {"id":5,"name":"Message","selected":false},
           {"id":9,"name":"Request","selected":false}
    ]

html

<div ng-class="{'selected': master, 'default': !master}">
   <div>
      <input type="checkbox" ng-model="master" ng-change="isSelectAll()" > Select all
   </div>
</div>
<div ng-repeat="item in classes | orderBy : 'id'" ng-class="{'selected': item.selected, 'default': !item.selected}">
   <div >
     <input type="checkbox" ng-model="item.selected" ng-change="isChecked()">
         {{ item.name }}
     </div>
</div>

这是固定的plunker

拼接数组时的奇怪行为，javascript

1 个答案: