为什么复选框`checkall`没有标记/取消标记其他框

Question

为什么复选框checkall没有标记/取消标记其他checkboxes

https://jsfiddle.net/5s3krtLv/

<div ng-controller="ContactMessagesController">
    <input ng-click="MarkCheckBox()" id="checkall" class="mangerTdLabel" type="checkbox" />
    <table id="usersTable">
        <tr>
            <td>
                <input type=checkbox class=checkBoxJs1 />
                <input type=checkbox class=checkBoxJs1 />
                <input type=checkbox class=checkBoxJs1 />
            </td>
        </tr>
    </table>
</div>


app.controller('ContactMessagesController', ['$scope', function ($scope) {


$scope.MarkCheckBox = function () {
        $('#usersTable').find('.checkBoxJs1:input[type=checkbox]').prop('checked', this.checked);
    }
}]);

Answer 1

你应该尝试不使用JQuery来执行这样的函数来修改DOM;相反，你应该尽可能多地尝试使用Angular。

以下是使用Angular完成此操作的示例：

<强>控制器

$scope.checkAll = function () {
    angular.forEach($scope.checkboxes, function (obj) {
      obj.selected = $scope.selectAll;
    });
  };

查看

<p>Check all</p>
    <input type="checkbox" ng-model="selectAll" ng-click="checkAll()" />
    <br />
    <p>Checkboxes</p>
    <div ng-repeat="checkbox in checkboxes track by $index">
      <input type="checkbox" ng-model="checkbox.selected" />
      <label ng-show="checkbox.selected">Checkbox {{ $index+1 }} selected!</label>
    </div>

And here's the working plunker.

Answer 2

尝试使用ng-model和ng-checked指令

<div ng-app="" ng-controller="ContactMessagesController">
      <input id="checkall" ng-model="active" class="mangerTdLabel" type="checkbox" />

        <table id="usersTable" >
             <tr>
             <td>
                <input type="checkbox" ng-checked="active" class="checkBoxJs1"  /> 
                <input type="checkbox" ng-checked="active" class="checkBoxJs1"  />
                <input type="checkbox" ng-checked="active" class="checkBoxJs1"  />

            </td>
            </tr>
        </table>
    </div>

Fiddle