2014-09-16 2 views
0

ng-options을 사용하여 드롭 다운 목록을 채우는 경우 서로에 따라 3 개의 드롭 다운이 있습니다. Dropdown1에서 특정 옵션을 선택하면 다른 두 개의 drpdowns가 나타납니다. 그런 다음 두 개의 드롭 다운에서 값을 선택하고 저장하지 않고 첫 번째 드롭 다운의 값을 변경하면 두 개의 드롭 다운이 사라집니다. 이제 Dropdown1에서 동일한 옵션을 다시 선택하면 이전에 선택한 값이 새로 고쳐지지 않습니다. data-ng-model="reason", data-ng-modelnote.reason로 변경 될 때 때이 같은 행동을 할 ng-if을 사용하고데이터 - 모델이 변경 될 때 ng-if가 작동하지 않습니다.

<li class="col-sm-3"> 
    <p>Reason<b>*</b></p> 
    <p> 
     <select data-ng-model="note.reason" data-ng-options="option as option.value for option in reasons"> 
      <option style="display:none" data-ng-model="note.reason" value="">Select Reason</option> 
     </select> 
    </p> 
</li> 
<li class="col-sm-3" ng-show="note.reason.value=='Intervention'"> 
    <p>Category<b>*</b></p> 
    <p> 
     <select data-ng-model="note.category" ng-if ="note.reason" data-ng-options="option as option.value for option in categories"> 
      <option style="display:none" selected="selected" value="">Select Category</option> 
     </select> 
    </p> 
</li> 
<li class="col-sm-3" ng-show="note.reason.value=='Intervention'"> 
    <p>Tone<b>*</b></p> 
    <p> 
     <select data-ng-model="note.tone" ng-if ="note.reason" data-ng-options="option as option.value for option in tones"> 
      <option style="display:none" value="">Select Tone</option> 
     </select> 
    </p> 
</li> 

는, 이전이 제대로 작동하고, ng-if 작동이 중단되었습니다. 자세히 설명해 주시겠습니까?

+0

같은 컨트롤러 모양을 무엇? '$ scope.note'가 컨트롤러에 정의되어 있습니까? – TheSharpieOne

+0

'

답변

0

당신은

<select ng-change="note.tone='';note.category='';" data-ng-model="note.reason" data-ng-options="option as option.value for option in reasons"> 

또는 가 드롭 다운을 새로 고쳐집니다

$scope.$watch('note.reason', function(){ 
    $scope.note.tone=""; 
    $scope.note.category=""; 
}); 

모두 아래로 컨트롤러에 $watch을 넣어 아래로 ng-change을 사용할 수 있습니다.

0

Thanq, 괜찮습니다.

$scope.prvdNote = {}; 
 
$scope.show=function(){ 
 
\t \t if(!angular.isUndefined($scope.prvdNote.prvdReason) && $scope.prvdNote.prvdReason.value=='Intervention'){ 
 
\t \t \t return true; 
 
\t \t }else{ 
 
\t \t \t $scope.prvdNote.prvdTone = undefined; 
 
\t \t \t $scope.prvdNote.prvdCategory = undefined; 
 
\t \t \t return false; 
 
\t \t } 
 
\t \t 
 
\t  
 
\t };
<li class="col-sm-3"> 
 
\t \t \t \t \t <p>Reason<b>*</b></p> 
 
\t \t \t \t \t <p> 
 
     
 
\t \t \t \t \t <select data-ng-model="prvdNote.prvdReason" data-ng-options="option as option.value for option in reasons" ><option style="display:none" value="" >Select Reason</option></select> 
 

 
\t \t \t \t \t </p> 
 
\t \t \t \t </li> 
 

 
\t \t \t \t <li class="col-sm-3" ng-show="show()" > 
 
\t \t \t \t \t <p>Category<b>*</b></p> 
 
\t \t \t \t \t <p> 
 
\t \t \t \t \t \t <select data-ng-model="prvdNote.prvdCategory" data-ng-options="option as option.value for option in categories" ><option style="display:none" value="" >Select Category</option></select> 
 
\t \t \t \t \t </p> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li class="col-sm-3" ng-show="show()"><p>Tone<b>*</b></p> 
 
\t \t \t \t <p> 
 
\t \t \t \t \t \t <select data-ng-model="prvdNote.prvdTone" data-ng-options="option as option.value for option in tones" ><option style="display:none" value="" >Select Tone</option></select> 
 
\t \t \t \t \t </p> 
 
\t \t \t \t </li>

관련 문제