如何使用角度检查所有复选框答案

【问题标题】：How to check all checkboxs with angular如何使用角度检查所有复选框
【发布时间】：2015-02-12 11:39:41
【问题描述】：

我有一个应该检查所有复选框的复选框。该复选框通过检查所有复选框来正常工作，但是角度不认为它们已被选中？角度知道它们是否被检查的唯一方法是我是否手动检查每一个。 （括号和for循环是来自laravel的刀片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，嘿，它更新了！

【问题讨论】：

使用 ng-checked 只会更新视图，不会更新模型
这是有道理的，为什么它不起作用，有更好的方法吗？
是的，创建一个函数并循环模型值（请参阅下面的答案）

标签： javascript php angularjs laravel checkbox

【解决方案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>

然后在你的控制器中：

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

【讨论】：

刚刚修正了上面的一个错字（$scope.newDiscussion.notify_partners[k]）
这段代码似乎没有全部检查，不知道为什么。 $scope.checkAll = function () { var val = $scope.everyoneCheck; for (var i = 0; i < $scope.newDiscussion.notify_partners.length; i++) { $scope.newDiscussion.notify_partners[i] = val; } }
for 循环没有运行，因为$scope.newDiscussion.notify_partners 显然没有任何内容。第一次填充属性是在视图中，这是您在顶部看到的代码。我最初使用 $scope.newDiscussion.notify_partners = []; 在我的 init 函数中启动该属性
如果我选中复选框，然后单击选中所有它会删除它们，它只是不会添加它们？

【解决方案2】：

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

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

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

在您的控制器中，您可以让toggleCheckAll() 循环您的模型并根据everyoneCheck 的值设置它们

【讨论】：