ng-if is not working when data-ng-model is changed

Question

Am using ng-options to populate dropdown list, There are 3 dropdowns which are dependent on each other. If I select a particular option in Dropdown1, the other two drpdowns should appear. Then, if I select some values in that two dropdowns and without saving am changing the value in 1st dropdown the 2 dropdowns should get disappeared. Now the problem is that if I re-select the same option in Dropdown1 the values which I have selected previously are not refreshed.

<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>

I am using ng-if to do the same, earlier it was working properly when data-ng-model="reason", when data-ng-model is changed to note.reason, ng-if stopped working. Can you explain to me the problem in Detail.

what does your controller look like? Is `$scope.note` defined in your controller? — TheSharpieOne, Sep 16 '14 at 16:28

score 0 · Answer 1 · answered Sep 16 '14 at 17:40

You can either use ng-change as below

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

Or put a $watch in the controller as below

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

Both will refresh the drop downs.

score 0 · Answer 2 · answered Sep 17 '14 at 05:23

Thanq,This is working Fine.

$scope.prvdNote = {};
$scope.show=function(){
  if(!angular.isUndefined($scope.prvdNote.prvdReason) && $scope.prvdNote.prvdReason.value=='Intervention'){
   return true;
  }else{
   $scope.prvdNote.prvdTone = undefined;
   $scope.prvdNote.prvdCategory = undefined;
   return false;
  }
  
    
 };

<li class="col-sm-3">
     <p>Reason<b>*</b></p>
     <p>
       
     <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>

     </p>
    </li>

    <li class="col-sm-3" ng-show="show()" >
     <p>Category<b>*</b></p>
     <p>
      <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>
     </p>
    </li>
    <li class="col-sm-3" ng-show="show()"><p>Tone<b>*</b></p>
    <p>
      <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>
     </p>
    </li>

ng-if is not working when data-ng-model is changed

2 Answers2