angular dropdowns that cascade

I want to create cascading drop-down menus in Angular, where each menu populates based on the selection made in the previous one. There will be a total of 5 dropdowns, with only the first one initially populated. The subsequent dropdowns should populate based on the selections made in the previous dropdowns, potentially using $http to retrieve new data from the server.

This is what I have so far:

<select class="selectScope" ng-model="scope1">
    <option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>
<select class="selectLevel1" ng-model="scope2">
    <option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>
<select class="selectLevel2" ng-model="scope3">
    <option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>
<select class="selectLevel3" ng-model="scope4">
    <option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>
<select class="selectLevel4" ng-model="scope5">
    <option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>

I know how to populate the first dropdown using $http, but without going into details, my question is whether it's possible to make these dropdowns trigger off of each other. For example, if I re-select level 3 after selecting all the way down to level 5, then levels 4 and 5 would reset (with 4 repopulating based on the new selection in 3). Simply put, I want them to interact dynamically. Is this achievable in Angular? I apologize if this sounds basic, as I am completely new to using Angular. Thank you!

Answer №1

To optimize your code, it's recommended to use ng-options instead of an ng-repeat for better performance.

<select ng-model='selectedValue' ng-change='loadData()' 
        ng-options='item.id as item.name for item in items'>
</select>

Upon selecting a value from the dropdown, you can trigger a function to load relevant data for subsequent selects.

$scope.loadData = function() {
          //Create URL based on selected value
          $http.get(myUrl).then(function(response){
          //process data if needed
           $scope.items2 = response.data;
    });
}

You can adjust the disabled state of other select boxes based on previous selections.

<select class="subSelect" ng-model="selectedSubValue" 
        ng-options='item.id as item.name for item in items2' ng-disabled='!selectedValue'>
</select>

Add some logic in change events to handle clearing model values when necessary, which is quite straightforward.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with Javascript/ajax/php: data is successfully sent from server to client, but client to server communication is not working as

Apologies for the duplicate post (Admins, kindly remove the other one!). I've been receiving great assistance from you all and was hoping to seek your help once again with the following question: I am currently working on implementing AJAX by allowin ...

Navigating with Angular's router occurs before the guard is fully completed

Within my Angular 8 application, the routing file is structured as below: const myRoutes: Routes = [ {path: '', component: FirstComponent , canActivate: [RegistrationSrcdGuard]}, {path: 'FirstComponent ', component: FirstCompon ...

Get information collectively in node.js

How can I retrieve 10 records from a MongoDB collection using NodeJs, with each batch containing 10 records? ...

Updating the ID's of nested elements in JavaScript when duplicating an element

After a fruitless search on Google, I have turned to the experts on SO for assistance. The challenge: Create a duplicate of a dropdown menu and an input field with the click of a button (which can be done multiple times) The proposed solution: Implement ...

Encountering an error with Vue-tables-2 when trying to generate a PDF using pdfmake: "Malformed table row" issue

Almost ready to download a .pdf file containing multiple selected rows from vue-tables-2 datatables. In my code, I am pushing the checkedRows from this table.body which includes both the header columns and the content of the checkedRows, which consists of ...

Guide on converting JSON object to condensed rows when using ng-repeat

From the database, I am receiving a JSON object which is one large object: $scope.totalsum = { "A1": 1155000, "A2": null, "A3": 2133, "A31": 29292, "A32": 2321, "A33": 232342, ...

The transformRequest function using $resource returns an error because of undefined data

Embarking on a MEAN project for practice, I've been following a tutorial from thinkster.io with some personal tweaks. Progress so far has been promising as all API routes work seamlessly when tested with Postman. The only hiccup I face (given my limit ...

Navigating with Google Maps is a breeze when incorporating it into Ionic and Angular

On my contact page, I'm trying to include a Google map with a specific location but so far have been unsuccessful. Here's how my clean .html file looks: <ion-header> <ion-navbar primary> <ion-title>Contact</ion- ...

The ajax success error function does not trigger in jQuery

Hey, check out my code below: <html> <head> <script src="http://code.jquery.com/jquery-1.8.0.min.js"> </script> </head> <body> <form id="foo"> <label for="bar">A bar</label> <input id ...

Tips for recalling the display and concealment of a div element using cookies

My HTML code looks like this: <div id='mainleft-content'>content is visible</div> <div id="expand-hidden">Button Expand +</div> To show/hide the divs, I am using JQuery as shown below: $(document).ready(function () { ...

Retrieving an item within another item

I'm attempting to retrieve the value of usertype within the result object, but I'm encountering issues with this. Here's what I've tried so far: if(data.result.usertype === 2){ console.log("redirect to type 2 user") } else if(data.re ...

The technique for accessing nested key-value pairs in a JSON object within an Angular application

After receiving the response from the backend, I have retrieved a nested hash map structure where one hash map is nested within another: hmap.put(l,hmaps); //hmap within hmap When returning the response to the frontend, I am using the ResponseEntity meth ...

To achieve two-way binding with a scope variable, it is necessary to enclose it within an

I am in need of creating a basic search feature for some items. I have designed a simple control with a button that clears the search query: <div class="item item-input item-button-right"> <i class="icon ion-ios-search placeholder-icon">&l ...

"Embracing AngularJs with the power of SocketIo

Can someone please help me with the code snippet provided below? This code is sourced from: http://www.html5rocks.com/en/tutorials/frameworks/angular-websockets app.factory('socket', function ($rootScope) { var socket = io.connect(); return { ...

The React application is showing an empty page without any visible errors during the compilation process

I'm having trouble with my React app - it compiles without errors but only shows a blank page. Can someone help me figure out what's wrong with my code? I'm new to React and could use some guidance. index.js import React from 'react&ap ...

Having difficulty implementing getJSON function in CodeIgniter framework

My goal is to integrate AJAX calls into my website using codeigniter in order to receive live updates from the database. The click button function properly and displays all JSON data, however, I am facing an issue when trying to display a specific array a ...

Prevent link from being clicked again in AngularJS after initial click

I'm in need of some assistance. I am trying to figure out how to disable the link (PAY Now) after it has been clicked on to prevent multiple clicks. <div class="Class1" data-ng-show="ShowButton == 'TRUE'"> <a href="javascript:void( ...

Error: An unexpected symbol '<' was encountered after the build process in Vue.js

I just finished deploying a MEVN stack application to heroku. While everything is functioning properly locally, I am encountering a blank page and the following errors in the console post-deployment: Uncaught SyntaxError: Unexpected token '<' ...

How can a loading circle be displayed upon clicking a button on a PHP website using JavaScript?

As a newcomer to the world of JavaScript programming, I'm facing a challenge that seems deceptively simple. My goal is to display a loading circle when a user clicks on an upload button, trigger external PHP code for image processing, and then make th ...

Comparing jquery ajax jsonp with angularjs $http json: A breakdown of two powerful ways

I have a scenario where I need to switch from using jquery to angularjs for a particular feature. Specifically, I am replacing jquery's ajax method with angularjs' $http method. This piece of code is responsible for enabling users to sign up for ...