Question

我想在按某个按钮时取消选中所有复选框。我需要在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。

感谢您的帮助！

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

Answer 2

将复选框ng-model绑定到for q in range(x,y,z): print(q)属性。请注意，我使用_selected而不是_selected，以防您的API在不久的将来返回一个与此邮件冲突的selected属性。

<强>的index.html

selected

<强>的script.js

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

以下是plunker：http://plnkr.co/edit/VPOjKMUVyrMpPfT9jLz3

Answer 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 = [];
  }

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

3 个答案:

两个ng-ifs