Question

我想这样做：

       [ ]  all toppings
       -----------------
       [ ] mushrooms
       [ ] peppers
       [ ] extra cheese
       [ ] artichokes

当用户检查或取消选中[]所有浇头时，个别浇头都会被设置为全部检查或全部未选中。

各个复选框工作正常。但是当控制器在setAll()方法中迭代顶部列表时，设置每个的选择状态，UI不会显示更改。

$scope.items = [{id: 100, name: "mushrooms", price: 1.00}, ....]

<div>
    <p><input type="checkbox" id="allToppings" 
              data-ng-click="setAll($event)"> all
            </p>
            <hr/>
            <p data-ng-repeat="item in items">
              <input type="checkbox" data-ng-model="item.selected" 
                  data-ng-click="item.selected=!item.selected">  {{item.name}}
            </p>
   </div>



 $scope.setAll = function (e) {    
       for (item in items) {
         item.selected = (e.target.checked);
      }                       
 }

调用setAll()方法，并正确设置每个项目的selected属性。让UI显示更改的正确方法是什么？浇头数组是否需要watched？

Answer 1

当迭代像for (item in items)这样的数组时，item将成为每个项目的索引。试试这个：

for (var i = 0; i < items.length; i++) {
    items[i].selected = (e.target.checked);
}

Answer 2

您可能希望使用框架自己的angular.forEach

$scope.setAll = function (e) {
    angular.forEach(items, function(item, key) {
        item.selected = e.target.checked;
    });
}

Angular＆＃34; master＆＃34; check-all复选框，用于设置所有其他复选框的已检查状态

2 个答案: