AngularJS：取消选中没有 ng-model 属性的复选框答案

【问题标题】：AngularJS: uncheck checkboxes with no ng-model attributeAngularJS：取消选中没有 ng-model 属性的复选框
【发布时间】：2017-08-13 18:41:22
【问题描述】：

我想在按下某个按钮时取消选中所有复选框。我需要在 AngularJS（没有 jQuery）上执行此操作。我的复选框没有 ng-model 属性。我如何取消选中它们？我的 HTML 结构：

    <li ng-repeat="channel in channelsList">
         <div class="checkbox">
             <label><input type="checkbox" value="" ng-click="isChecked(channel.id)">
                <img src="images/checkbox-unchecked.png" alt="" class="unchecked">
                <img src="images/checkbox.png" alt="" class="checked"><span>{{channel.name}}</span>
             </label>
         </div>
    </li>

我的 channelsList 只是一个具有 2 个属性的对象数组：id 和 name。

感谢您的帮助！

【问题讨论】：

你为什么不用ng-model？
你是否有布尔值来告诉你你的频道是否被检查？在哪里？
<input type="checkbox" ng-checked="channel.selected" ng-click="channel.selected=!channel.selected" /> 并且当用户单击取消选中按钮时，将所有 channel.selected 属性重置为 false

标签： angularjs checkbox angularjs-ng-repeat

【解决方案1】：

两个 ng-ifs

如果你真的想避免使用 ng-model，你可以通过...实现相同的效果...注意选中的属性

<li ng-repeat="channel in channelsList">
         <div class="checkbox">
             <label>
                <input ng-if="isChecked(channel.id);" type="checkbox" checked ng-click="check(channel.id);">
                <input ng-if="!isChecked(channel.id);" type="checkbox" ng-click="check(channel.id);">
                <img src="images/checkbox-unchecked.png" alt="" class="unchecked">
                <img src="images/checkbox.png" alt="" class="checked"><span>{{channel.name}}</span>
             </label>
         </div>
</li>

【讨论】：

你不觉得 ng-attr 会更简单吗？
这种方案不会影响客户端的电脑性能吗？我在想 AngularJS 应该从 ngChecked 或 ngIf 属性永久调用该函数来检查返回值是否相同。或者这不是问题？
ng-if 语句在 angularjs 中的每个摘要循环中进行评估。如果您的 isChecked 类似于 $http.get("/api/ischecked/"+id);或者如果它只是返回一个值就可以了。
感谢您的帮助！
您不需要 isChecked 函数。相反，只需在每个通道上设置一个选中的属性，然后绑定到 channel.checked。

【解决方案2】：

将复选框 ng-model 绑定到 _selected 属性。请注意，我使用 _selected 而不是 selected，以防您的 API 在不久的将来返回与该属性发生冲突的 selected 属性。

index.html

<!doctype html>

<html lang="en" ng-app="app">
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="SampleController">

    <ul>
        <li ng-repeat="channel in channelsList">
             <input type="checkbox" ng-model="channel._selected" /> {{channel.name}} (id={{channel.id}})
        </li>
    </ul>
    <button ng-click="uncheckAll()">Uncheck all</button>

</body>
</html>

script.js

angular.module('app', []);

angular.module('app').controller('SampleController', function ($scope) {

    $scope.channelsList = [
     {id: 'c1', name: 'CNN'}, 
     {id: 'c2', name: 'BBC'},
     {id: 'c3', name: 'Discovery Channel'}
    ];

    $scope.uncheckAll = function() {
        angular.forEach($scope.channelsList, function (channel) {
            channel._selected = false;
        });
    };
});

这里是 plunker：http://plnkr.co/edit/VPOjKMUVyrMpPfT9jLz3

【讨论】：

谢谢。这应该可以，但是channelsList 是我从服务器获得的一个数组，我希望它保持与服务器上相同的状态（没有selected 属性）。还是这不重要？
不，这不重要，我将selected: true 添加到我希望已经被选中的频道中，查看这个没有选中但新的id 属性可以由服务器API 返回的新plunker：@ 987654322@享受。
请注意，我将新 plunker 中的 channel.selected 替换为 channel._selected 以防您的 API 在不久的将来返回不应与此冲突的 selected 属性；)
@DmitrijBurlaj 新的 plunker 是否符合您的需求？

【解决方案3】：

我不确切知道您需要什么，但假设您有一个 id 数组告诉检查的 id，如下所示：

$scope.channelsList = [
    {'id' : 1, 'name' : 'foo' },
    {'id' : 2, 'name' : 'bar' },
    {'id' : 3, 'name' : 'foo' }
  ];
  var checked = [1, 3]


  $scope.isChecked = function(id){
    return checked.indexOf(id) >= 0;
  };

你可以放一个像这样的按钮：

<button ng-click="uncheckAll()">click</button>

并用它来清除你的数组：

 $scope.uncheckAll = function(){
    checked = [];
  }

【讨论】：

是的，我有完全相同的 id 数组来判断是否检查了 id。我可以像你描述的那样清除这个数组，但它不会改变视图，所以复选框保持选中状态。