Question

我尝试设置一个可以选择/取消选中视图中所有复选框的功能。但它似乎根本不起作用。有什么我错过了吗？

我的实施基于以下内容：http://jsfiddle.net/deeptechtons/TKVH6/。

detail.html

<li class="item item-checkbox">
    All Services<br>
    <label class="checkbox">
        <input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" ng-model="selectedAll">
    </label>
</li>               
<li class="item item-checkbox" ng-repeat="e in inventory">
    {{ e.title }}<br>
    <span class="grey-text">&pound;{{ e.price | number: 2 }}</span>
    <label class="checkbox">
        <input type="checkbox" ng-model="item.selected">
    </label>
</li>

controller.js

  $scope.checkAll = function () {
    if ($scope.selectedAll) {
      $scope.selectedAll = true;
    } else {
      $scope.selectedAll = false;
    }
    angular.forEach($scope.inventory, function (item) {
      item.selected = $scope.selectedAll;
    });
  };

Answer 1

这部分代码毫无意义。如果值为true，则将其设置为true，与false相同，只需将其删除即可。

if ($scope.selectedAll) {
  $scope.selectedAll = true;
} else {
  $scope.selectedAll = false;
}

此外，您最好使用ng-change代替ng-click。

结合其他事情：您已将ng-model两次添加到第一个输入元素。

主要问题是：您使用ng-repeat引用e中的每个项目，并使用item.selected。您应该使用e.selected或更改ng-repeat定义：

<input type="checkbox" ng-model="e.selected">

或

<li class="item item-checkbox" ng-repeat="item in inventory">

如果您使用后者，则必须将e.price和e.title更改为item.price和item.title。

Answer 2

如果你真的很盯着声明：

if ($scope.selectedAll) {
  $scope.selectedAll = true;
} else {
  $scope.selectedAll = false;
}

您可能会注意到分配是多余的：如果已经true，则将其设置为true，如果已经false，则设置为false。< / p>

通常，当angular没有达到预期效果时，通过在相关范围方法中设置断点来调试代码非常简单，并且有助于确定导致此类错误的原因。

Answer 3

我宁愿不将函数放入input元素中。您可以做的是在selectAll复选框上执行ng-model并接受一个布尔值并使用该布尔值和ng-if来检查取消选中其他字段。我明白了吗？

选中/取消选中AngularJS中无效的所有功能

3 个答案: