角材チェックボックス - チェック機能を追加する

Question

角材で指定された'indeterminate' attributeの<md-checkbox>を使用して、選択したチェックボックスに基づいて配列を更新しています。ただし、アレイはng-clickに基づいて更新されるだけで、ng-changeには更新されません。したがって、 "すべて選択"項目をチェックすると、値が配列に挿入されません。

これを考慮するcodepen。

ng-changeに基づいてaddData functionを更新するにはどうすればよいですか？

Answer 1

• ng-changeがng-modelを必要としませんが、あなたが実際には、各項目にselectedプロパティを追加
• が、あなたは基本的に同じアイテムを保持している3つの配列を持って、あなただけの1
• で行うことができます。この例のためのモデルが必要と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