0

Plnkr: https://plnkr.co/edit/Tt96EE2rruy1HAudRVJR?p=preview

チェックボックスの次のネストされたループがあります。

<ul>
  <li ng-repeat="continent in destinations">
    <input type="checkbox" ng-model="continent.selected">
    {{continent.name}} ({{continent.countries_selected}} / {{continent.countries.length}}) - {{continent.all_selected}}
    <ul>
      <li ng-repeat="country in continent.countries">
        <input type="checkbox" ng-model="country.selected" ng-checked="continent.selected">
        {{country.name}}
      </li>
    </ul>
  </li>
</ul>

これは、一部またはすべての子チェックボックスがチェックされているかどうかを検出 ($watch) するコードです。チェックされている場合は、親チェックボックスもチェックされます。

それはうまくいきます。

しかし、親ボックスをチェックしてもチェックされません。

私が達成したいのは、親のチェックボックスをチェックすると、そのすべての子もチェックされ、親のチェックボックスをオフにすると、そのすべての子がオフになることです。

$scope.$watch('destinations', function(destinations){

  var total_selected = 0;

  angular.forEach(destinations, function(continent){

    continent.countries_selected = 0;

    angular.forEach(continent.countries, function(country){

      total_selected += country.selected ? 1 : 0

      continent.countries_selected += country.selected ? 1 : 0

      if (continent.countries_selected == continent.countries.length) {
        continent.selected = true;
      } else {
        continent.selected = false;
      }

    });

  });

  $scope.select_all = function(continent){
    continent.selected = true;
  }

  $scope.total_selected = total_selected;

}, true);
4

2 に答える 2

0

あなたはそれを試すことができます 。値functionの変更時にa を呼び出すcontinent

<input type="checkbox" ng-model="continent.selected" ng-change="parentChange($index)">

そしてコントローラーで：別の関数を追加します

$scope.parentChange = function(index) {
    angular.forEach( $scope.destinations[index].countries, function(country) {
      country.selected = $scope.destinations[index].selected;
    });
  };

ng-checked="continent.selected"国のチェックボックスを追加する必要がない場合があります。

使用する

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

それ以外の

<input type="checkbox" ng-model="country.selected" ng-checked="continent.selected">

プランカーデモリンク

于 2016-02-04T11:09:08.080 に答える
0

チェックボックスの ng-checked 属性は式を受け取ります。したがって、式に基づいてチェックするために、以下で説明するように、および/または条件を使用して式を指定できます。

<input type="checkbox" ng-checked="child_1 && child_2 && child_3 && child_4 && child_5" ng-model="parent"/> Select All<br/>

すべての子チェックボックスがクリックされたときに計算を行うために、別の関数を記述する必要はありません

これが例です

于 2016-04-20T18:36:10.370 に答える