ng-hide和ng-show在dropdownlist angularjs上

Question

我正在創建一個Web應用程序，其中有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不可編輯，當用戶更改下拉菜單1（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 。 這將使第二個下拉菜單具有獲取的甜點值