我正在创建一个网络应用,其中我有4个下拉列表
<select>//calling dynamic data</select
<select>//calling dynamic data as per dropdown1</select
<select>//calling dynamic data as per dropdown2</select
<select>//calling dynamic data as per dropdown3</select
我想下拉2,3,4不可编辑,当用户更改dropdown1(dropdown2)的文本时应该是可编辑的,当他更改下拉文本2(dropdown3)应该是可见的等等。
需要你的帮助
答案 0 :(得分:0)
您需要禁用ng,并在ng-change事件时启用它。我将用2个下拉菜单解释一下。您可以将此扩展到您想要的任意数量。
<select ng-change="fruitselect(fruitname)" ng-model="fruitname" ng-init="fruitname = fruits[0]" >
<option ng-repeat="fruit in fruits" value="{{fruit}}">{{fruit}}</option>
</select>
<select ng-model="desertname" ng-disabled="isDessertDisabled">
<option ng-repeat="dessert in desserts" value="{{dessert}}">{{dessert}}</option>
</select>
在第二个下拉列表中,请注意ng-disabled="isDessertDisabled"
。现在在角度控制器中,
$scope.fruits = ['apple', 'orange','banana', 'grapes', 'plum'];
$scope.isDessertDisabled = true;
$scope.desserts = ['apple pie', 'orange crush', 'red wine', 'plum cake']
$scope.fruitselect = function(fruitname){
// some http call to get some desserts based on fruit name
// $scope.desserts = response from $http call
$scope.isDessertDisabled = false;
}
现在,虽然我已经对甜点阵列进行了硬编码,但在你的情况下,它将从http调用中填充。然后isDessertDisabled
将设置为false
。这将启用带有获取的甜点值的第二个下拉列表