Hiding and showing dropdown list options in AngularJS using ng-hide and ng-show

Question

Hiding and showing dropdown list options in AngularJS using ng-hide and ng-show

I'm currently developing a web application that includes four dropdown lists.

<select>// loading dynamic data</select
<select>// loading dynamic data based on selection from dropdown1</select
<select>// loading dynamic data based on selection from dropdown2</select
<select>// loading dynamic data based on selection from dropdown3</select

My goal is to make dropdowns 2, 3, and 4 uneditable. When the user changes the selection in dropdown1, dropdown2 should become editable. Then, when the text in dropdown2 is changed, dropdown3 should become visible, and so forth.

I would greatly appreciate your assistance with this. Thank you!

javascript angularjs drop-down-menu

Answer 1

Answer №1

To implement the functionality you need, utilize ng-disabled and enable it on the ng-change event trigger. I will demonstrate this using 2 dropdowns, but you can scale it up to accommodate more options if necessary.

<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 second dropdown, take note of the ng-disabled="isDessertDisabled". In your 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){
  // perform an HTTP call to retrieve desserts based on selected fruit
  // $scope.desserts = response from $http call
  $scope.isDessertDisabled = false;
}

Although I have manually inputted the dessert array here, in your scenario, it will be populated dynamically via an HTTP call. Subsequently, isDessertDisabled will be toggled to false, thereby enabling the second dropdown with the fetched dessert options.

Answer 2

To implement the functionality you need, utilize ng-disabled and enable it on the ng-change event trigger. I will demonstrate this using 2 dropdowns, but you can scale it up to accommodate more options if necessary.

<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 second dropdown, take note of the ng-disabled="isDessertDisabled". In your 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){
  // perform an HTTP call to retrieve desserts based on selected fruit
  // $scope.desserts = response from $http call
  $scope.isDessertDisabled = false;
}

Although I have manually inputted the dessert array here, in your scenario, it will be populated dynamically via an HTTP call. Subsequently, isDessertDisabled will be toggled to false, thereby enabling the second dropdown with the fetched dessert options.

Hiding and showing dropdown list options in AngularJS using ng-hide and ng-show

Answer №1

Similar questions

Issue encountered with updating canvas texture twice in A-Frame and pdf.js while operating in virtual reality mode

What is the best way to showcase the information stored in Firestore documents on HTML elements?

When working with AngularJS, you can enhance your application by implementing a global AJAX error handler if one has

Save and retrieve documents within an electron application

Utilize Jquery to dynamically replace HTML partials based on the device's screen resolution

I'm having trouble getting Grunt Source Maps to function properly within the foundation-press theme

Struggling to make JavaScript read JSON data from an HTML file

Linking two block backgrounds with CSS or JavaScript: A comprehensive guide

Learn the process of inserting JSON data into a MySQL database with Node.js

Reset form after submission in Angular 1.5

Ensure that the array of JSON objects is a subset of another array of JSON objects

How should NodeJS be utilized for accessing various directories?

Save user input data into an Excel file using PHPExcel

When should you utilize child or nested states in AngularJS UI-Router?

The discord.js TypeScript is throwing an error stating that the 'index.ts' file is missing when trying to run 'ts-node index.ts'

Error: Unexpected token 'undefined' encountered, which is not recognized as a primary expression. This error occurs at column null within the expression [xx], beginning at [xx%]

Animated smooth updates in d3 line graphs are the key to creating dynamic and

Guide on using PHP to remove the trash icon glyphicon

What is the best way to style the current element being targeted in React?

Why am I unable to access the array once the loop has finished?