Как проверить всех детей на основе родителя, а также проверить родителя на основе детей?

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);

javascript checkbox angularjs ng-repeat angularjs-ng-checked
person trs    schedule 04.02.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

можешь попробовать . вызвать function при изменении значения 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">

ССЫЛКА НА DEMO Plunker

person Shaishab Roy    schedule 04.02.2016

arrow_upward
0
arrow_downward

Атрибут ng-checked в флажке принимает выражение. Таким образом, вы можете задать выражение с условиями и/или, как указано ниже, чтобы оно проверялось на основе выражения.

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

Вам не нужно писать отдельную функцию для выполнения вычислений при нажатии каждого дочернего флажка.

Вот пример

person GANI    schedule 20.04.2016