根据选定的选项,我想使用离子和角度js显示选择字段

时间:2016-11-08 08:30:49

标签: angularjs select ionic-framework

在父选择选项中有Option-1,Option-2,Option-3以及也是空的。当选择任何选项时,我想显示下面的子选择字段,如果选择选项2我希望显示2选择字段如下,如果选择为空我不想显示子选择标记。

这是代码,但我不想显示我需要动态显示的静态方式



function Controller ($scope) {
    $scope.myDropDown = '';
}

<div ng-app ng-controller="Controller">
    <select ng-model="myDropDown">
          <option value="q"></option>
          <option value="one">One</option>
          <option value="two">Two</option>
          <option value="three">Three</option>
    </select>
    
        
    <select ng-show="myDropDown=='one'" >
          <option value="1"></option>
          <option value="111">1</option>
          <option value="1111">1111</option>
          <option value="111">1111111</option>
    </select>
    
    <select ng-show="myDropDown=='two'" >
          <option value="2"></option>
          <option value="222">2</option>
          <option value="2222">222</option>
          <option value="222">22222</option>
    </select>
    <select ng-show="myDropDown=='two'" >
      		<option value="22"></option>
          <option value="222222">22</option>
          <option value="22222222">222222</option>
          <option value="222222">2222222222</option>
    </select>
    
    <select ng-show="myDropDown=='three'" >
      		<option value="3"></option>
          <option value="333">3</option>
          <option value="3333">333</option>
          <option value="333">33333</option>
    </select>
    <select ng-show="myDropDown=='three'" >
          <option value="33"></option>
          <option value="333333">33</option>
          <option value="33333333">333333</option>
          <option value="333333">3333333333</option>
    </select>
    <select ng-show="myDropDown=='three'" >
          <option value="333"></option>
          <option value="333333333">333</option>
          <option value="333333333333">333333333</option>
          <option value="333333333">333333333333333</option>
    </select>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

如果我很好理解你的问题,你想从select中选择项目然后在离子列表中显示1,2或3项,如果这是你想要的,这是一个想法:

 <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="1">Language 1</option>
        <option ng-option value="2">Language 2</option>
        <option ng-option value="3">Language 3</option>
      </select>
    </div>
    <ion-list>
      <ion-checkbox ng-if="Lang2>=1">Read</ion-checkbox>
      <ion-checkbox ng-if="Lang2>=2">Write</ion-checkbox>
      <ion-checkbox ng-if="Lang2>=3">Speak</ion-checkbox>
    </ion-list>
  </div>

这是一个example

修改
这就是你want PS:这只是一个激励你的例子,真正的解决方案取决于你的需求

修改
那个example

怎么样?