javascript - 如何检查所有带 Angular 复选框

Question

我有一个复选框，应该选中所有复选框。该复选框通过选中所有复选框来正常工作，但是 Angular 认为它们没有被选中？ Angular 知道它们是否被选中的唯一方法是我是否手动检查每一个。 (括号和 for 循环是来自 laravel 的 blade php)

<label class="checkbox-inline">
  <input type="checkbox" ng-model="everyoneCheck"/> Everyone
</label>
@foreach($company->users as $tagIndex => $user)
    <label class="checkbox-inline">
      <input type="checkbox" ng-checked="everyoneCheck" ng-model="newDiscussion.notify_partners[{{$tagIndex}}]" ng-true-value="{{$user->id}}" /> {{ $user->first_name }} {{ $user->last_name }}
    </label>                  
@endforeach

单击提交按钮后，我继续将 $http.post 发送到我的服务器，我只是将一个对象传递给 post 函数，这就是对象。

var discussionData = {
    'title': $scope.newDiscussion.title,
    'discussion': $scope.newDiscussion.summary,
    'company_id': company_id,
    'notify_partners': $scope.newDiscussion.notify_partners
};

出于某种原因，当我使用检查所有方法时，没有任何内容进入 notify_partners，但是当我手动单击每个复选框时，它们将被正确输入和提交。

有什么帮助吗？我觉得这是某种有约束力的问题，我只需要告诉 Angular，嘿，它已更新!

Answer 1

这里有一个方法:

<p><input type="checkbox" ng-model="globalCheck" ng-click="toggleCheckAll()" /> Check All</p>

<ul>
    <li ng-repeat="i in init">
        <input type="checkbox" ng-model="checkbox[$index]" /> Checkbox {{ $index + 1 }} {{ checkbox[$index] }} 
    </li>
</ul>

然后在你的 Controller 中:

function myControl($scope) {

    $scope.globalCheck = false;
    $scope.checkbox = {};
    $scope.init = [0,1,2,3,4,5,6,7,8,9];

    $scope.toggleCheckAll = function() {
        var k, val = !$scope.globalCheck;
        console.log(val);
        for(k in $scope.init) {
            $scope.checkbox[k] = val;
        }
    }

}

参见 JSfiddle工作示例