如何使用 angular 检查所有复选框

Question

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

<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 到我的服务器，我只是将 object 传递给 post 函数，这是 object.

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

ng-checked 不会更新 ng-model 中绑定的值。它只影响元素本身的 checked 属性。

您最好的选择是使用 ng-change 执行某些功能并相应地更新所有模型。

<input type="checkbox" 
   ng-model="everyoneCheck"
   ng-change="toggleCheckAll()"/>

并且在您的控制器中，您可以 toggleCheckAll() 循环您的模型并根据 everyoneCheck

的值设置它们

Answer 2

方法如下：

<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>

然后在你的控制器中：

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

如何使用 angular 检查所有复选框

How to check all checkboxs with angular

javascript

php

checkbox

laravel

angularjs