角材料复选框 - 向 ng-checked 添加功能

Question

我正在使用 Angular Material 提供的 <md-checkbox> 和 'indeterminate' attribute 来根据选中的复选框更新数组。但是，数组仅基于 ng-click 更新，而不是基于 ng-change。因此，选中“全选”项，不会将值插入到数组中。

考虑一下codepen。

如何根据 ng-change 更新 addData function？

Answer 1

• ng-change 确实需要 ng-model 但您实际上只需要一个模型即可完成此示例
• 您有 3 个数组，基本上包含相同的项目，您可以只使用一个
• 在每个项目上添加一个selected 属性并将其用作模型
• 使用https://docs.angularjs.org/api/ng/filter/filter 过滤selected 项的数组

控制器：

controller('AppCtrl', function($scope, $filter) {
  $scope.items = [{num: 1},{num: 2}, {num: 3}, {num: 4},{num: 5}];

  $scope.isIndeterminate = function() {
    var selected = $filter('filter')($scope.items, {selected: true}).length;
    console.log(selected);
    return selected !== 0 && selected !== $scope.items.length;
  };

  $scope.allChecked = function() {
   return $filter('filter')($scope.items, {selected: true}).length === $scope.items.length;  
  };

  $scope.toggleAll = function() {
    var selected = $filter('filter')($scope.items, {selected: true}).length;
    var newSelected = selected < $scope.items.length;
    angular.forEach($scope.items, function(item) {
      item.selected = newSelected;   
    });
  };
});

标记：

  <div>
    <fieldset class="demo-fieldset">
      <legend class="demo-legend">Using
        <md-checkbox> with the 'indeterminate' attribute </legend>
      <div layout="row" layout-wrap="" flex="">
        <div flex-xs="" flex="50">
          <md-checkbox aria-label="Select All" md-indeterminate="isIndeterminate()" ng-click="toggleAll()" ng-checked="allChecked()">
            <span ng-if="isChecked()">Un-</span>Select All
          </md-checkbox>
        </div>
        <div class="demo-select-all-checkboxes" flex="100" ng-repeat="item in items">
          <md-checkbox ng-model="item.selected">
            {{ item.num }}
          </md-checkbox>
        </div>
      </div>
    </fieldset>
    <div ng-repeat="data in items | filter: {selected: true}" style="display: inline-block">
       {{data.num}},
    </div>
  </div>

改编的codepen：http://codepen.io/kuhnroyal/pen/gMLGxL

根据评论编辑： http://codepen.io/kuhnroyal/pen/ZOBaNO