下拉列表中的angularjs

时间:2015-09-24 09:46:13

标签: angularjs selectlist

我必须下拉列表。第一个下拉列表是:

<select ng-model="vm.eesAdminSetupData.Type"
class="form-control"  
id="Type"
name="Type"
required>
<option value="Form">Form</option>
<option value="List">List</option></select>

<select ng-model="vm.eesAdminSetupData.SettingID" 
class="form-control" 
id="SettingID" 
name="SettingID" 
ng-options="option.SettingID as option.SettingID + ' - ' + option.Name for option in vm.eesSettingIdOptions" >
<option ></option>
</select>

我想要做的是,一旦我选择了List,其他下拉列表的值应为 blank null 。这可能吗?

3 个答案:

答案 0 :(得分:0)

只需向第二个ng-show添加<select>,这样只有在选择列表时才会显示。{/ p>

<select ng-model="vm.eesAdminSetupData.Type"
  class="form-control"  
  id="Type"
  name="Type"
  required>
    <option value="Form">Form</option>
    <option value="List">List</option>
 </select>

 <select
   ng-show="vm.eesAdminSetupData.Type == 'List'" 
   ng-model="vm.eesAdminSetupData.SettingID" 
   class="form-control" 
   id="SettingID" 
   name="SettingID" 
   ng-options="option.SettingID as option.SettingID + ' - ' + option.Name for option in vm.eesSettingIdOptions">
     <option></option>
 </select>

答案 1 :(得分:0)

尝试

<select ng-model="vm.eesAdminSetupData.Type"
                class="form-control"  
                id="Type"
                name="Type"
                ng-change="changesettingsDropdown()"
                required>
                <option value="Form">Form</option>
                <option value="List">List</option>
                </select>

                <select ng-model="SettingID" 
                class="form-control" 
                id="SettingID" 
                name="SettingID" 
                ng-options="option.SettingID as option.SettingID + ' - ' + option.Name for option in vm.eesSettingIdOptions" >
                <option ></option>
                </select>

在控制器中

$scope.vm = {};
$scope.vm.eesSettingIdOptions = [{"SettingID":"1","Name":"aaaa"}, {"SettingID":"2","Name":"bbbb"}];
$scope.changesettingsDropdown = function(){
    if($scope.vm.eesAdminSetupData.Type == "List") {
        $scope.SettingID = "0";
    }
}

我已将ng-change添加到第一个选择元素并更改了其他选择元素的ng-model

答案 2 :(得分:0)

在第一个ng-change列表中写一个select属性,如

ng-change=resetOtherDropdown()

在上面的javascript函数中只重置其他下拉列表的ng-model值

resetOtherDropdown = function() {
    $scope.vm.eesAdminSetupData.SettingID = "";
}