ドロップダウンリストからオプションを選択すると表示されます。 - Ionic

Question

このコードを実行すると、1番目のドロップダウンリストから2番目のdivを表示し、同様に2番目のドロップダウンリスト3番目のdivのオプションを選択すると表示されるはずです。しかし、2番目のドロップダウンリストから値を選択すると、3番目のdivは表示されません。私はそれを動作させるために何をすべきですか？私はAngularJsを使用していますが、JQueryは使用していません。

HTMLコード：

<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コード：

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

Answer 1

はここにあなたの作業コードです。

ng-ifをng-showに置き換えました。ng-ifはDOMから不要なコードを削除し、角度はウォッチャーを失います。 DOM内にありますが、表示されていませんが角度実行initを持つng-showと異なります。

<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

この情報がお役に立てば幸いです。