ng-hide和ng-show在dropdownlist angularjs上

Question

i am creating a web app in which i have 4 dropdownlist

<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

i want to make dropdown 2,3,4 uneditable, when user change the text of dropdown1(dropdown2) should be editable and when he change the text of downdown 2(dropdown3) should be visible and so on.

needed ur help

Answer 1

You need ng-disabled, and enable it upon ng-change event. I will explain this with just 2 dropdowns. you can extend this to as many as you want.

  <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>

In the 2nd dropdown,note that ng-disabled="isDessertDisabled" . Now in the angular controller,

$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;
} 

Now, although I have hardcoded the desserts array, in your case, it will bepopulated from http call. And then isDessertDisabled will be set to false . This will enable the 2nd dropdown with the fetched desserts values