選擇複選框ng - 如果選中了父項複選框，父項和子項都是不可數的diff。陣列

結構是選擇複選框ng - 如果選中了父項複選框，父項和子項都是不可數的diff。陣列

$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選擇SUBD下應顯示，SUBD可以是可選擇的。

我要趕上僅分裂和SUBD的ID。

檢查它Plunker http://plnkr.co/edit/hjb5HTITyJelqdjLN5h2?p=preview

來源

2017-09-26 Raju Sah

更新

如果你想被選中父僅僅只有當選定一個或更多的孩子，那麼你可以考慮禁用父輸入，並基於選擇的更新兒童。

而且它們存儲在一個新的變量$scope.selected爲JSON。

<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

來源

2017-09-26 07:46:23 Korte

你好，@korte，如果選擇沒有孩子的，家長應選中狀態，它不僅爲test1，如果任何部門被選中它應該顯示subd列表。你在哪裏存儲它是相應的json。 –

檢查更新的答案 – Korte

你！，這很好，但你可以實現它所有爲test1，test2的...並存儲爲JSON如在我的問題的plunker –

選擇複選框ng - 如果選中了父項複選框，父項和子項都是不可數的diff。陣列

回答

相關問題