각도 JS보기가 제대로 업데이트되지 않습니다.

Question

그것은 앵귤러 JS의 첫날이기 때문에 나는 꽤 초보자입니다. 이해할 수없는 행동에 대한 몇 가지 설명을 요청하고 있습니다. "패널"로 구성된 양식을 작성하려고합니다. 각 패널에는 여러 폼 요소 (확인란, 라디오 그룹 등) 또는 메시지가 들어 있습니다. 처음에는 첫 번째 패널 만 보입니다. 사용자가 "행동"을 할 때마다 (무언가를 선택하고, 무언가를 선택하십시오). 이전 선택 사항 및 기타 데이터를 기반으로 패널이 표시됩니다 (때로는 더 많음).

각 양식 요소는 컨트롤러 내부에 모델이 있습니다. 각 패널에는 ngShow 지시문과 컨트롤러에이 패널을 표시할지 여부를 반환하는 함수가 있습니다. 여기에 두 개의 패널 내 코드에서 작은 추출물 :

첫 번째 패널 (항상 표시 ROOT 패널)

   <div class="panel panel-default" data-ng-show="true"> 
       <div class="panel-heading"> 
        <h3 class="panel-title">PLP</h3> 
       </div> 
       <div class="panel-body"> 
        <div class="form-group"> 
         <div class="col-xs-offset-0 col-xs-10"> 
          <div class="radio"> 
           <label><input type="radio" name="group" data-ng-model="choixPlp" value="plp1"> PLP 1</label> 
          </div> 
          <div class="radio"> 
           <label><input type="radio" name="group" data-ng-model="choixPlp" value="plp2"> PLP 2</label> 
          </div> 
          <div class="radio"> 
           <label><input type="radio" name="group" data-ng-model="choixPlp" value="plp3"> PLP3</label> 
          </div> 
         </div> 
        </div> 
        <p> {{choixPlp}} </p> 
       </div> 
      </div> 

, 제 2 패널

   <div class="panel panel-default" 
       data-ng-show="fmotifRetourCommentaires()"> 
       <div class="panel-heading"> 
        <h3 class="panel-title">Dépot</h3> 
       </div> 
       <div class="panel-body"> 
        <div class="form-group"> 
         <div class="col-xs-offset-0 col-xs-10"> 
          <label> Motif Retour : {{motif}} </label> 
          <p>Commentaires</p> 
          <div class="textarea"></div> 
          <textarea rows="" cols=""></textarea> 
          <br /> 
          <button type="submit" class="btn btn-default">Déposer</button> 

         </div> 
        </div> 
       </div> 
      </div> 

App.js는

var app = angular.module('dynamicForm', []); 
app.controller('MainCtrl', function($scope) { 

    $scope.choixPlp; 
    $scope.motif; 

    $scope.fmotifRetourCommentaires = function() { 
     if ($scope.choixPlp == "plp1") { 
      $scope.motif = "Degroupage Abusif"; 
      return true; 
     } 
     if ($scope.choixPlp == "plp2") { 
      $scope.motif = "Deconstruction a tort"; 
      return true; 
     } 
     return false; 
    }; 
}); 

내 문제는 두 번째 패널에서 변수 "motif"의 값이 뷰에 표시되지 않는다는 것입니다. 첫 번째 패널에서 내 선택을 변경합니다. 새로운 선택을 두 번 클릭하면 변경됩니다. 나는이 코드 부분을 추가 않았고 그것은 작동하지만 난 왜 이해가 안 ...

setInterval(function() { 
    $scope.$apply() 
}, 500) 

Answer 1

는 첫 번째 클릭에 작동하지 않는 이유를하지만 모델이 설정되지 않습니다 때문에 두 번째 클릭에 라디오 버튼이 포커스를 잃을 때까지 (나는 어떤 이유로 시계와 리프레쉬 시퀀스가 ​​적절하지 않다고 생각한다.)

choixPlp의 값에 따라 어떤 액션을하기를 원하기 때문에, . 귀하의 코드를 조금 수정하고 변수 show_panel_2를 사용했고, 그 플래그는 시계의 함수를 기반으로 설정되거나 해제됩니다.

  <div class="panel panel-default" 
     data-ng-show="show_panel_2"> 
     <div class="panel-heading"> 
      <h3 class="panel-title">Dépot</h3> 
     </div> 
     <div class="panel-body"> 
      <div class="form-group"> 
       <div class="col-xs-offset-0 col-xs-10"> 
        <label> Motif Retour : {{motif}} </label> 
        <p>Commentaires</p> 
        <div class="textarea"></div> 
        <textarea rows="" cols=""></textarea> 
        <br /> 
        <button type="submit" class="btn btn-default">Déposer</button> 

       </div> 
      </div> 
     </div> 
    </div> 

<script> 
var app = angular.module('dynamicForm', []); 
app.controller('MainCtrl', function($scope) { 

    $scope.choixPlp; 
    $scope.motif; 

    $scope.show_panel_2 = false; 

    $scope.$watch('choixPlp', function() { 
     if ($scope.choixPlp == "plp1") { 
      $scope.motif = "Degroupage Abusif"; 
      $scope.show_panel_2 = true; 
      return; 
     } 
     if ($scope.choixPlp == "plp2") { 
      $scope.motif = "Deconstruction a tort"; 
      $scope.show_panel_2 = true; 
      return; 
     } 

     $scope.show_panel_2 = false; 
    }); 

}); 
</script>