AngularJS - 상위 체크 박스에서 하위 체크 박스를 선택 해제하십시오.

Question

내 페이지에 3-4 단계의 계층 구조가있는 체크 박스가 있습니다. 첫 번째 레벨이 체크되면 레벨 2 체크 박스는 레벨 2 - 레벨 3 체크 박스가 나타납니다. &이 나타납니다.

사용자가 부모 확인란의 선택을 취소하면 라디오를 포함하여 모든 하위 확인란이 선택 해제되어야합니다.

여기 시나리오가 있습니다.

그때 ng-if를 사용하여 모든 어린이 &에 대한 컨테이너 div를 작성하여 표시 숨기기 작업을 만들었습니다. 이 쇼는 컨테이너를 숨 깁니다. 하지만 어떻게 모든 하위 요소 확인란의 선택을 취소합니까?

샘플 코드 : -

<div class="col-sm-12"> 
       <input type="checkbox" ng-model="todo.level1" /> 
       <label>Level 1</label> 
      </div> 
      <div class="col-sm-12" ng-show="todo.level1"> 
       <!------- Level 2 -------> 
       <div class="col-sm-12"> 
        <div class="col-sm-offset-1 col-sm-11" ng-if="todo.level1"> 
         <input type="checkbox" ng-model="todo.c2" /> 
         <label>&nbsp;C2</label> 
        </div> 
        <div class="col-sm-12" ng-show="todo.level2"> 
         <div class="col-sm-12" ng-if="todo.level2"> 
          <div class="margin-left-2"> 
           <input type="checkbox" ng-model="todo.level3" /> 
           <label>Level 3 - 1</label> 
          </div> 
         </div> 
         <div class="col-sm-12" ng-if="todo.level4"> 
          <div class="margin-left-3"> 
           <select id="Select1"> 
            <option>Choose</option> 
            <option>25%</option> 
            <option>25-50%</option> 
            <option>50%</option> 
           </select> 
          </div> 
         </div> 
         <div class="col-sm-12" ng-if="todo.c2"> 
          <div class="margin-left-2"> 
           <input type="checkbox" ng-model="todo.level3" /> 
           <label>Level 3 - 2</label> 
          </div> 
         </div> 
         <div class="col-sm-12" ng-if="todo.level4"> 
          <div class="margin-left-3"> 
           <label>Level 4 - 1</label><br /> 
           <input type="radio" value="Yes" /><label>&nbsp;Yes</label> 
           <input type="radio" value="No" /><label>&nbsp;No</label> 
          </div> 
         </div> 
        </div> 
       </div> 

Answer 1

두 가지 옵션

변경

에 대한

1 시계가

mod.controller ('parentCtrl', 기능 ($ 범위) { $가 scope.todo = {level1 : false};

$scope.$watch('todo.level1', function(val){ 
    if(val === false){ 
     // clear your checkboxes 
    } 
}); 

2 자식 div에 ng-init을 추가하고 div가 표시 될 때 '초기 값'즉, ng-init = 'todo.level2 = false'(표시 될 때마다 평가 됨)

div class="col-sm-offset-1 col-sm-11" ng-if="todo.level1" 
ng-init='todo.level2 = false'