选中复选框ng-if选中父复选框,父母和子女都选中。孩子是不可数的差异。排列

时间:2017-09-26 07:36:22

标签: angularjs checkbox angularjs-ng-repeat angular-ng-if

结构是

$scope.divisions = [
  { Description: 'test1', Id: 1 },
  { Description: 'test2', Id: 2 },
  { Description: 'test3', Id: 3 },
  { Description: 'test4', Id: 4 },
  { Description: 'test5', Id: 5 }
];

  $scope.subd = [
  { Description: 'sub1', Id: 7 },
  { Description: 'sub2', Id: 8 },
  { Description: 'sub3', Id: 9 }
];

如果选择了test1,则应显示sub,sub可以选择。

我想只捕获分区和子目录的id。

在Plunker http://plnkr.co/edit/hjb5HTITyJelqdjLN5h2?p=preview

上查看

1 个答案:

答案 0 :(得分:0)

<强>更新

如果您希望仅在选择一个或多个孩子时选择父母,那么您可以考虑禁用父输入并根据选定的孩子进行更新。

还将它们作为json存储在新变量$scope.selected上。

<ul class="radio-check-group">
    <li ng-repeat="d in divisions">
      <input disabled type="checkbox" ng-model="d.selected" class="" id="{{'div' + d.Id}}" name="selectedDivisions[]" />
      <label for="div{{$index}}">{{d.Description}}</label>
      <ul>
        <li ng-repeat="s in d.subd">
        {{$parent.$index}}
          <input type="checkbox" ng-change="updateParent(d)" ng-model="s.selected" class="" id="{{'div' + d.Id}}" name="selectedsubd[]" />
          <label for="div{{$index}}">{{s.Description}}</label>
        </li>
      </ul>
    </li>
  </ul>

和控制器功能:

function initializeDivisionSubd() {
    angular.forEach($scope.divisions, d => {
        d.subd = angular.copy($scope.subd);
    })
};

$scope.selected = [];

initializeDivisionSubd();

$scope.updateParent = (parent) => {
    parent.selected = !!parent.subd.find(s => s.selected);
    $scope.selected = angular.toJson($scope.divisions.filter(d => d.selected).map(d => {
      return {
        Id: d.Id,
        subd: d.subd.filter(sd => sd.selected).map(sd => {
          return {
            Id: sd.Id
          }
        })
      }
    }));

这是updated fiddle