Question

我使用这个jquery进行check-all复选框，点击后会勾选所有复选框：

function checkAll(e) {
    var check = $(e).is(':checked');
    if (check) {
        $('[name="row_Checkbox"]:not(:checked)').trigger('click');
    }
    else {
        $('[name="row_Checkbox"]:checked').trigger('click');
    }
}

但是它有一个问题，我设置角度函数用于ng-click复选框，根据某些条件更改ng-model，如果选中复选框多于一个数字，ng-model变为null，则它在我单独点击复选框，但当我使用check-all复选框时，ng-model不会变为null并且仍然有值!!!

我尝试了各种解决方案，但其中任何一个都有相同的结果。

出了什么问题???

Answer 1

这可以是处理它的另一种方式，而不是合并jquery和angular，只需使用angular即可。

下面的代码将使用对象中的一个字段来管理HTML中的模型状态，如此

例如

＆＃13;

var app = angular.module('plunker', []);

    app.controller('MainCtrl', function($scope) {
      $scope.name = 'World';
      $scope.items = [
     {name: 'Field one', checked:false},
     {name:'Field two', checked:true},
     {name:'Field three', checked: false},
     {name: 'Field four', checked: true}
      ];
     $scope.checkall = false;
      
      $scope.toggleAll = function(checked){
       angular.forEach($scope.items, function(item){
         item.checked = checked
       });
      }
      
      // listen to when the others were clicked or not
     $scope.checkboxClicked = function (item, value){
       if(value === false){
       $scope.checkall = false
      }else{
      $scope.checkall = true
        // check the others to see if you need to make check all true or not
        angular.forEach($scope.items, function(x){
         if(x.checked !== true && x.name !== item.name){
          $scope.checkall = false
         }
       });
      }
     }
      
    });

＆＃13;

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

     <body  ng-app="plunker">
     <div  ng-controller="MainCtrl">
        <p>Hello {{name}}!</p>
    <input type="checkbox" ng-click="toggleAll($event.target.checked)" ng-model="checkall"> Check all --{{checkall}}
        <ul>
        <li ng-repeat="item in items">
        <input type='checkbox' ng-model="item.checked" ng-click="checkboxClicked(item, $event.target.checked)"> {{item.name}}-- {{item.checked}}</li>
        </ul>
      </div>
     </body>

＆＃13;

Answer 2

Here's a plunk 考虑这个答案：https://stackoverflow.com/a/22777980/6517383 您可以调度Event来处理角度循环。

$('a').dispatchEvent(new MouseEvent('click', {
  'view': window,
  'bubbles': true,
  'cancelable': true
}));

就像那样https://stackoverflow.com/a/17110709/6517383

function checkAll(e) {
    var check = $(e).is(':checked');
    if (check) {
        $('[name="row_Checkbox"]:not(:checked)').trigger('click');
        $('[name="row_Checkbox"]:not(:checked)').trigger('change');
        $('[name="row_Checkbox"]:not(:checked)').trigger('input'); 
    }
    else {
        $('[name="row_Checkbox"]:checked').trigger('click');
        $('[name="row_Checkbox"]:checked').trigger('change');
        $('[name="row_Checkbox"]:checked').trigger('input'); 
    }

}

此主题的其他答案我更有帮助Update Angular model after setting input value with jQuery

Check-All复选框不会更改ng-model

2 个答案: