angularjs中的checkAll复选框不起作用

时间:2019-03-27 10:43:03

标签: angularjs

我正在尝试将选中的复选框数据保存到一个数组中,当选中一个复选框时,我能够将数据推送到数组中,但是当我选中“ checkAll”复选框时,如果选中了所有复选框,则不会选中所有复选框复选框,然后取消选中checkAll复选框,都不会取消选中所有复选框。

我曾经尝试使用javascript来达到预期的效果,但是我试图在angularjs中做到这一点,但未能实现。

HTML:

<div ng-if="RosList!= null">
  <table align='center' width='80%' >

    <tr class='trdesign'> 
      <td>
        <input type="hidden" id="RosList" data-ng-model="RosList" name="RosList" value="{{RosList}}">  
        <input type="checkbox" id="all" data-ng-model="checkedAll" ng-change="toggleCheckAll()" />
      </td>
      <td> Sl No</td>
      <td> RO No.</td>
    </tr>

    <tr ng-repeat="user in  RosList" >
      <td>
        <input type="checkbox" value="{{user.do_ro_no}}" data-ng- 
model="user.checked" ng-change="modifyArrayToPost(user)"/>
      </td>
      <td>{{user.slno}}</td>
      <td>{{user.do_ro_no}}  </td>

    </tr>

  </table> 
  <tt>array: {{arrayToPost}}</tt>

</div>

Angularjs:

$scope.arrayToPost = [];

 $scope.toggleCheckAll = function() {
   if($scope.checkedAll) {
     angular.forEach($scope.RosList, function(user) {
       user.checked = true;
        $scope.modifyArrayToPost(user);
     });
   }
   else {
     angular.forEach($scope.RosList, function(user) {
       user.checked = false;
        $scope.modifyArrayToPost(user);
     });
   }
 }


 $scope.modifyArrayToPost = function(user) {
   if(user.checked && $scope.arrayToPost.indexOf(user.do_ro_no) == -1){
     $scope.arrayToPost.push(user.do_ro_no);
   }
   else if(!user.checked) {
     $scope.arrayToPost.splice($scope.arrayToPost.indexOf(user.do_ro_no), 1);
   }
 }

 $scope.$watch('RosList', function() {
     var allSet = true;
     var allClear = true;
     angular.forEach($scope.RosList, function(user) {
        if (user.checked) {
          allClear = false;
        } else {
          allSet = false;
        }         
     });

     var checkAll = $element.find('#all');
     checkAll.prop('indeterminate', false);
     if (allSet) {
        $scope.checkedAll = true;
     } else if (allClear) {
        $scope.checkedAll = false;
     } else {
        $scope.checkedAll = false;
        checkAll.prop('indeterminate', true);
     }
   }, true);

0 个答案:

没有答案