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

时间:2016-10-21 10:10:00

标签: javascript angularjs drop-down-menu

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

需要你的帮助

1 个答案:

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