Angularjs cascading dropdownlist for dynamic data

Can someone help me troubleshoot my second dropdownlist? The first one is working fine but the second one doesn't seem to be functioning correctly.

Here is the HTML code:

<select class="form-control" 
   ng-options="option as option.label for option in myCtrl.options track by option._id" 
     ng-model="myCtrl.selected"></select>

<select ng-disabled="!myCtrl.selected" class="form-control">
    <option ng-repeat="child in myCtrl.options">@{{child.childs}}</option>
</select>

And here is the JS code:

var vm = this;
vm.options = {};

// Fetching data from "data/support.json" for cascading options
$http.get("data/support.json").success(function(response){
    vm.options = response;
    vm.selected = vm.options[0];
});

The contents of support.json are shown below:

  [{
    "_id": "1",
    "label": "Title 1",
    "childs": [
      "Title 1 - sub 1",
      "Title 1 - sub 2"    
    ]
  },
  {
    "_id": "2",
    "label": "Title 2",
    "childs": [
      "Title 2 - sub 1",
      "Title 2 - sub 2" 
    ]
  }]

Answer №1

The next option to consider is

<option ng-repeat="child in myCtrl.selected.childs">{{child}}</option>

If you want to showcase the offspring of the chosen parent selection.


Furthermore, the choices for your initial select can be streamlined to

ng-options="option.label for option in myCtrl.options track by option._id"

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

Triggering a Javascript Alert Causes a Webpage Redirection

<?php session_start(); include_once "connect.php"; $fullName = $_POST['fullname']; $userName = $_POST['username']; $emailAdd = $_POST['email']; $passWord = $_POST['password']; $query = mysql_query("SELECT * FR ...

Steps for crafting an eraser in EaselJS

Currently, I am working on a canvas painting project and looking to add an eraser tool. However, when attempting to erase content using the provided lines of code, it ends up clearing the entire canvas instead. //undo tool var undo = new createjs.Bitmap(a ...

Help! I'm trying to access a property inside event.body in AWS Lambda, but it keeps returning undefined. What

https://i.sstatic.net/467mq.png I've been attempting to retrieve event.body.data, but it keeps returning undefined. I've tried various methods such as JSON.parse(event), JSON.parse(event.body), JSON.parse(event.body.data), JSON.stringify, and mo ...

Filter ng-repeat using OR condition for property

I'm trying to filter a list based on a model value entered in a text box. For example: var person={}; person.Id=1; person.Name="Test 1"; person.PetName="Rest 1" var persons=[]; persons.push(person); person.Id=2; person.Name="Test ds"; per ...

Steps for inserting a word into an element using jQuery

How can I use JQuery to insert English words into an element? Before: رایجترین نوع این پارامتر کلاس پایه eventArgs می باشد. After : رایجترین نوع این پارامتر کلاس پایه <bdo>eventArgs& ...

struggling to access $scope variable in MVC partial view using AngularJS

I am looking to include a partial in my main content. This snippet is from my _layout.cshtml page. <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewBag.T ...

What kind of type is recommended to use when working with async dispatch in coding?

For my TypeScript and React project, I am currently working on an action file called loginAction.tsx. In this file, there is a specific line of code that handles the login functionality: export const login = (obj) => async dispatch => { dispatch( ...

Querying for Mongoose documents based on date ranges using the moment library

Below is the code for my current condition: if (req.query.df == "today") { start = moment().subtract(1,'days'); end = moment().add(1,'days'); condition = {"$gt":start, "$lt":end}; } else if(req.query.df = ...

Dynamically populate the dropdown options in Angular as the dropdown is selected during runtime

I have a JSON object that holds the names of different dropdowns. It looks something like this - $scope.dropdowns = { "dp1" :{}, "dp2" :{} } The objects dp1 and dp2 correspond to their respective dropdown menus. These objects will be used by th ...

JavaScript Firebase: Service worker malfunctioning during navigation

I'm currently developing a website that relies on firebase messaging. To make this happen, a specialized service worker for firebase has been integrated into the site. This website functions as a webchat platform where messages are synchronized and s ...

Request Pending | Observation of WebSockets in NestJS

I'm currently working on a NestJS application that interacts with the Binance Websocket API to retrieve some data. While I am able to see all the data in my console.log, I'm facing an issue where the request seems to be pending when using Postman ...

Identify repeated entries in an HTML table by comparing the values in the first two columns

One of my requirements is to check for duplicate data in an HTML table. The table consists of two columns - product name and batch. While the product name can be repeated, if the same batch repeats for the same product name, I need to display an alert with ...

Having trouble with the JSON array not being rendered properly in React Native?

I received the following JSON data from an API endpoint using a fetch() function: [{"username":"\"Hyh\"","name":"GitHub","url_main":"https://www.github.com/","url_user&quo ...

Utilize the class or interface method's data type

In the context of a child component calling a callback provided by its parent, this situation is commonly seen in AngularJS. As I am utilizing TypeScript, I aim to implement strong typing for the callback in the child component. Here is the initial stat ...

Implementing expiration dates or future dates with jQuery

How can I modify this jQuery code to display an expiration date specified in months or years? For instance, I have created a Membership Card for a client that is valid for 2 years, and I would like to include an expiration date in the script. Thank you j ...

send multiple textbox values to controller in CodeIgniter

I am new to Codeigniter and I'm facing some difficulties in understanding how to accomplish a task. In my view page, there are five rows generated using a for loop. Each row consists of two select boxes and two input boxes. I don't know how to re ...

Error: The gulp-cssmin plugin encountered a TypeError because it attempted to read the property '0' of a null

I am attempting to condense my code, but I am encountering this error: D:\gulp-compiler\node_modules\gulp-cssmin\node_modules\clean-css\lib\selectors\extractor.js:66 return name.replace(/^\-\w+\-/, ...

Generate a Bar Chart with ChartJS

i encountered an issue while trying to utilize ChartJS. I believe the problem lies in my improper inclusion of the chartjs library. I am following the instructions provided on this link. Here is the structure of my project: -app.html --app/ ------app.c ...

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

Standardize special characters for auto-complete functionality

I am trying to standardize the data in an autocomplete feature by removing all special characters. However, I am unsure how to replace the character "-" with a whitespace. I typically use VCS as my code editor. I attempted using %20 as a replacement, but ...