To avoid displaying an empty drop-down menu, ensure that the options are populated before showing it using AngularJS

Question

To avoid displaying an empty drop-down menu, ensure that the options are populated before showing it using AngularJS

I have a situation where there are 3 different drop-downs - Drop-down A, Drop-down B, Drop-down C.
Depending on the selection made in Drop-down C, additional dropdowns will be populated.

Let's consider another set of 10 drop-downs numbered from 1 to 10 that will appear based on the choice made in Drop-down C.

If I choose item 1 from Dropdown C, then DropDown 1, 2, 4, 6 should be displayed.
If I select item 2 from Dropdown C, then DropDown 1, 2, 5, 6, 8 should be displayed.

There are many such scenarios like this.

Once the necessary dropdowns are populated and shown on the page, only the selected dropdown values should be saved to the database upon submission.
If any dropdown does not have any options, it should not be visible on the page.

Jsfiddle link : jsfiddle

Can you provide assistance on how to achieve this?

javascript angularjs

Answer 1

Answer №1

If you want to customize the dropdown options based on specific requirements, you can achieve this in your controller by toggling the show/hide functionality:

angular.module('app', [])
  .controller('Controller', function($scope) {
    $scope.opt1 = ["opt1", "opt2"];
    $scope.opt2 = ["opt1", "opt2"];
    $scope.opt3 = ["opt1", "opt2"];
    $scope.opt4 = ["opt1", "opt2"];
    $scope.opt5 = ["opt1", "opt2"];
    $scope.opt6 = ["opt1", "opt2"];
    $scope.opt7 = ["opt1", "opt2"];
   $scope.opt8 = ["opt1", "opt2"];
    $scope.opt9 = ["opt1", "opt2"];
    $scope.opt10 = ["opt1", "opt2"];
    
    $scope.showDropDownOptions = [];
    $scope.showDropDownOptions[0] = [2,3,6];
    $scope.showDropDownOptions[1] = [1,4];
    $scope.showDropDownOptions[2] = [5,9,10,7];
    $scope.showDropDownOptions[3] = [8];
  })

<!DOCTYPE html>

<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="app">
  <div ng-controller="Controller">
    <br>
    <hr>
    <select name="main" id="main">
    <option value="mainOption">mainOption1</option>
    <option value="mainOption">mainOption2</option>
    <option value="mainOption">mainOption3</option>
    <option value="mainOption">mainOption4</option>
  </select>
    <hr>
    <select name="sub" id="main">
    <option value="subOption">subOption1</option>
    <option value="subOption">subOption2</option>
    <option value="subOption">subOption3</option>
    <option value="subOption">subOption4</option>
  </select>
    <hr>
    <select ng-model="selectC" name="subSub" id="main">
    <option value="0">subSubOption1</option>
    <option value="1">subSubOption2</option>
    <option value="2">subSubOption3</option>
    <option value="3">subSubOption4</option>
  </select>

    <hr>
    <select ng-if="showDropDownOptions[selectC].indexOf(1) != '-1' && selectC && opt1.length>0" ng-model="selectedName" ng-options="x for x in opt1">
  </select>
    <select ng-if="showDropDownOptions[selectC].indexOf(2) != '-1' && selectC && opt2.length>0" ng-model="selectedName" ng-options="x for x in opt2">
  </select>
    <select ng-if="showDropDownOptions[selectC].indexOf(3) != '-1' && selectC && opt3.length>0" ng-model="selectedName" ng-options="x for x in opt3">
  </select>
    <select  ng-if="showDropDownOptions[selectC].indexOf(4) != '-1' && selectC && opt4.length>0" ng-model="selectedName" ng-options="x for x in opt4">
  </select>
    <select  ng-if="showDropDownOptions[selectC].indexOf(5) != '-1' && selectC && opt5.length>0" ng-model="selectedName" ng-options="x for x in opt5">
  </select>
    <select  ng-if="showDropDownOptions[selectC].indexOf(6) != '-1' && selectC && opt6.length>0" ng-model="selectedName" ng-options="x for x in opt6">
  </select>
    <select  ng-if="showDropDownOptions[selectC].indexOf(7) != '-1' && selectC && opt7.length>0" ng-model="selectedName" ng-options="x for x in opt7">
  </select>
    <select  ng-if="showDropDownOptions[selectC].indexOf(8) != '-1' && selectC && opt8.length>0" ng-model="selectedName" ng-options="x for x in opt8">
  </select>
    <select  ng-if="showDropDownOptions[selectC].indexOf(9) != '-1' && selectC && opt9.length>0" ng-model="selectedName" ng-options="x for x in opt9">
  </select>
    <select  ng-if="showDropDownOptions[selectC].indexOf(10) != '-1' && selectC && opt10.length>0" ng-model="selectedName" ng-options="x for x in opt10">
  </select>
  </div>
</body>

</html>

Answer 2

If you want to customize the dropdown options based on specific requirements, you can achieve this in your controller by toggling the show/hide functionality:

angular.module('app', [])
  .controller('Controller', function($scope) {
    $scope.opt1 = ["opt1", "opt2"];
    $scope.opt2 = ["opt1", "opt2"];
    $scope.opt3 = ["opt1", "opt2"];
    $scope.opt4 = ["opt1", "opt2"];
    $scope.opt5 = ["opt1", "opt2"];
    $scope.opt6 = ["opt1", "opt2"];
    $scope.opt7 = ["opt1", "opt2"];
   $scope.opt8 = ["opt1", "opt2"];
    $scope.opt9 = ["opt1", "opt2"];
    $scope.opt10 = ["opt1", "opt2"];
    
    $scope.showDropDownOptions = [];
    $scope.showDropDownOptions[0] = [2,3,6];
    $scope.showDropDownOptions[1] = [1,4];
    $scope.showDropDownOptions[2] = [5,9,10,7];
    $scope.showDropDownOptions[3] = [8];
  })

<!DOCTYPE html>

<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="app">
  <div ng-controller="Controller">
    <br>
    <hr>
    <select name="main" id="main">
    <option value="mainOption">mainOption1</option>
    <option value="mainOption">mainOption2</option>
    <option value="mainOption">mainOption3</option>
    <option value="mainOption">mainOption4</option>
  </select>
    <hr>
    <select name="sub" id="main">
    <option value="subOption">subOption1</option>
    <option value="subOption">subOption2</option>
    <option value="subOption">subOption3</option>
    <option value="subOption">subOption4</option>
  </select>
    <hr>
    <select ng-model="selectC" name="subSub" id="main">
    <option value="0">subSubOption1</option>
    <option value="1">subSubOption2</option>
    <option value="2">subSubOption3</option>
    <option value="3">subSubOption4</option>
  </select>

    <hr>
    <select ng-if="showDropDownOptions[selectC].indexOf(1) != '-1' && selectC && opt1.length>0" ng-model="selectedName" ng-options="x for x in opt1">
  </select>
    <select ng-if="showDropDownOptions[selectC].indexOf(2) != '-1' && selectC && opt2.length>0" ng-model="selectedName" ng-options="x for x in opt2">
  </select>
    <select ng-if="showDropDownOptions[selectC].indexOf(3) != '-1' && selectC && opt3.length>0" ng-model="selectedName" ng-options="x for x in opt3">
  </select>
    <select  ng-if="showDropDownOptions[selectC].indexOf(4) != '-1' && selectC && opt4.length>0" ng-model="selectedName" ng-options="x for x in opt4">
  </select>
    <select  ng-if="showDropDownOptions[selectC].indexOf(5) != '-1' && selectC && opt5.length>0" ng-model="selectedName" ng-options="x for x in opt5">
  </select>
    <select  ng-if="showDropDownOptions[selectC].indexOf(6) != '-1' && selectC && opt6.length>0" ng-model="selectedName" ng-options="x for x in opt6">
  </select>
    <select  ng-if="showDropDownOptions[selectC].indexOf(7) != '-1' && selectC && opt7.length>0" ng-model="selectedName" ng-options="x for x in opt7">
  </select>
    <select  ng-if="showDropDownOptions[selectC].indexOf(8) != '-1' && selectC && opt8.length>0" ng-model="selectedName" ng-options="x for x in opt8">
  </select>
    <select  ng-if="showDropDownOptions[selectC].indexOf(9) != '-1' && selectC && opt9.length>0" ng-model="selectedName" ng-options="x for x in opt9">
  </select>
    <select  ng-if="showDropDownOptions[selectC].indexOf(10) != '-1' && selectC && opt10.length>0" ng-model="selectedName" ng-options="x for x in opt10">
  </select>
  </div>
</body>

</html>

To avoid displaying an empty drop-down menu, ensure that the options are populated before showing it using AngularJS

Answer №1

Similar questions

Interpret the JSON reply

Unable to call upon JavaScript code from an external file

Step-by-step guide for implementing an "on change" event for a select box within a dialog box

Developing ECMAScript code that is modular and compatible with both web browsers and node.js

Arranging images next to each other using CSS and HTML

Is there a way to modify initialValue's value following every iteration?

Choosing the right framework for implementing push notifications can be a critical decision. Should

Tips for transferring PHP response data between pages in AngularJS without relying on local storage

Utilize React JS to parse and display a sophisticated JSON structure in a dropdown menu

Modify CSS using JavaScript at a specific screen size

No content found in jQuery .text() values within iframe

The Joi Validation feature is ineffective when used with the schema provided below

EmberJS - how to register a precompiled handlebars template

Choose an option removed upon clicking

The issue with session storage persisting even after closing the iframe

Retrieve the input range slider value only after the mouse is released

Why does the jQuery .ajax() POST Request result in a 405 (Method Not Allowed) error while the GET request does not?

JavaScript: How can I execute a count that pertains solely to elements that are currently visible

What are the steps to downloading a server-generated image with user data from the client using Express?

cannot showcase the reply in a popup (modal)