각도 재질 확인란 - 확인 기능 추가

Question

각도 재질로 제공되는 'indeterminate' attribute이있는 <md-checkbox>을 사용하여 선택한 확인란을 기반으로 배열을 업데이트합니다. 그러나 배열은 ng-click을 기반으로 업데이트되며 ng-change는 업데이트되지 않습니다. 따라서 "모두 선택"항목을 선택하면 값이 배열에 삽입되지 않습니다.

이것을 고려하십시오 codepen.

변경 사항을 기준으로 addData function을 어떻게 업데이트 할 수 있습니까?

Answer 1

• ng-change이 ng-model을 필요로하지 않습니다하지만 당신이 실제로 각 항목에 selected 속성을 추가
• 당신은 기본적으로 동일한 항목을 들고 3 개 배열을 가지고, 당신은 단지 하나의
• 로 할 수있는이 예를 들어 모델이 필요하고 https://docs.angularjs.org/api/ng/filter/filter

Contro를 사용하여 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