Question

当我运行此代码时，它应该显示从第一个下拉列表中选择选项的第二个div，类似地选择第二个下拉列表第3个div的选项应该显示。但是从第二个下拉列表中选择一个值时，第三个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 code：

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

Answer 1

这是您的工作代码。

我已将ng-if替换为ng-show，因为ng-if会删除DOM中不需要的代码，并且会失去其观察者的角度。与DOM中的ng-show不同，但是没有显示但是有角度运行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

希望这有帮助。

从下拉列表中选择选项时显示div。 - 离子

1 个答案: