Himanshu K Himanshu K - 6 months ago 543
AngularJS Question

Show div on selecting an option from drop down list. - Ionic

When I run this code, it is supposed to show 2nd div on selecting an option from 1st dropdown list, similarly selecting an option for 2nd dropdown list 3rd div should be shown. But the 3rd div is not visible on selecting a value from 2nd dropdown list. What should I do to make it work. I am only using AngularJs and not JQuery.

Html code:

<div class="well">
<div class="form-group">
<select class="form-control" id="sel1" ng-model="Lang1" ng-change="changeMe()">
<option ng-option value="1">Language 1</option>
<option ng-option value="1">Language 2</option>
<option ng-option value="1">Language 3</option>
</select>
</div>
<ion-list>
<ion-checkbox >Read</ion-checkbox>
<ion-checkbox >Write</ion-checkbox>
<ion-checkbox >Speak</ion-checkbox>
</ion-list>
</div>

<div class="well" ng-if="Lang1 == '1'">
<div class="form-group">
<select class="form-control" id="sel2" ng-model="Lang2" ng-change="changeMe()">
<option ng-option value="2">Language 1</option>
<option ng-option value="2">Language 2</option>
<option ng-option value="2">Language 3</option>
</select>
</div>
<ion-list>
<ion-checkbox >Read</ion-checkbox>
<ion-checkbox >Write</ion-checkbox>
<ion-checkbox >Speak</ion-checkbox>
</ion-list>
</div>

<div class="well" ng-if="Lang2 == '2'">
<div class="form-group">
<select class="form-control" id="sel3">
<option>Language 1</option>
<option>Language 2</option>
<option>Language 3</option>
</select>
</div>
<ion-list>
<ion-checkbox >Read</ion-checkbox>
<ion-checkbox >Write</ion-checkbox>
<ion-checkbox >Speak</ion-checkbox>
</ion-list>
</div>
</div>


js code:

$scope.changeMe = function(){
alert(changed);
};

Answer

Here is your working code.

I've replaced ng-if with ng-show, because ng-if removes the code that is not required from the DOM and angular loses its watchers on it. Unlike ng-show which is in the DOM but isn't displayed but have angular running init.

<div ng-app="myApp" ng-controller="MyController">
  <div class="well">
    <div class="form-group">
      <select class="form-control" id="sel1" ng-model="Lang1" ng-change="changeMe()">
        <option ng-option value="1">Language 1</option>
        <option ng-option value="1">Language 2</option>
        <option ng-option value="1">Language 3</option>
      </select>
    </div>
    <ion-list>
      <ion-checkbox>Read</ion-checkbox>
      <ion-checkbox>Write</ion-checkbox>
      <ion-checkbox>Speak</ion-checkbox>
    </ion-list>
  </div>

  <div class="well" ng-show="Lang1 == '1'">
    <div class="form-group">
      <select class="form-control" id="sel2" ng-model="Lang2" ng-change="changeMe()">
        <option ng-option value="2">Language 1</option>
        <option ng-option value="2">Language 2</option>
        <option ng-option value="2">Language 3</option>
      </select>
    </div>
    <ion-list>
      <ion-checkbox>Read</ion-checkbox>
      <ion-checkbox>Write</ion-checkbox>
      <ion-checkbox>Speak</ion-checkbox>
    </ion-list>
  </div>

  <div class="well" ng-show="Lang2 == '2'">
    <div class="form-group">
      <select class="form-control" id="sel3" ng-model="Lang3" ng-change="changeMe()">
        <option>Language 1</option>
        <option>Language 2</option>
        <option>Language 3</option>
      </select>
    </div>
    <ion-list>
      <ion-checkbox>Read</ion-checkbox>
      <ion-checkbox>Write</ion-checkbox>
      <ion-checkbox>Speak</ion-checkbox>
    </ion-list>
  </div>
</div>

WORKING DEMO

Hope this helps.