Question

我正在创建一个网络应用，其中我有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）应该是可见的等等。

需要你的帮助

Answer 1

您需要禁用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。这将启用带有获取的甜点值的第二个下拉列表

下拉列表angularjs上的ng-hide和ng-show

1 个答案: