How do I set up cascading dropdownlists in Angular?

Question

I got an angular dropdown list with some options. Lets say we have a dropdown list with

[List]
A
B
C
D
E
F

If you choose A you will see another dropdownlist with:

[List]
A-1
A-2
A-3
A-4

And with B

[List]
B-1
B-2

So the second list depends on what you choose in the first list. So far i got this.

Html

<div class="" ng-show="signIn">
    <select ng-model="myProject" ng-options="proj.title for proj in projects | unique:'title'"><option value="">-- choose project --</option></select>
    <select ng-options="myProject.name"></select>
</div>

The problem is i cant use the binded variable in the first list.. What is the best way to achieve this.

martinczerwi · Accepted Answer · 2014-05-26 16:26:47Z

5

This actually depends on your data structure, and how you retrieve it. I've mocked up an example of using a nested structure like this:

$scope.list = [
    {
        name:'A',
        items: [
            'A-1',
            'A-2',
            'A-3',
            'A-4'
        ]
    }, {
        name: 'B',
        items: [
            'B-1',
            'B-2'
        ]
    }, {
        name: 'C'
    }
];

Here's the live example: http://jsfiddle.net/hRz8G/

See if you can use it, maybe you'll need to adjust your data structure. If that's impossible, post your data structure, we might be able to work out a solution.

Update

Try this example, and see if it fits your needs: http://jsfiddle.net/hRz8G/3/

It's traversing the projects list, and nests all the tasks inside of the project in a tasks-array.

[{
  "projectId":1,
  "title":"someTitle",
  "user":"mike",
  "tasks":[
    {"taskId":1,"name":"Sales"},
    {"taskId":3,"name":"Support"}
  ]
},
...
]

I hope that's kind of the solution you're looking for.

There's a filter defined, that keeps things tidy. Unfortunately it's kind of tightly bound to the project-object structure. If the id fieldname ('projectId') changes, you'll need to change the filter too, but that's kind of a problem I'm struggling to solve.

edited May 26, 2014 at 16:26

answered May 26, 2014 at 12:27

martinczerwi

2,84725 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mike Over a year ago

Yes this is exactly what i mean. The only things is the thing you said about my data structure. I get data via a post to my php and i get JSON data back. The data looks something like this. {projectId: 1, title: someTitle, user:mike, taskId: 1, name: Sales},{projectId: 1, title: someTitle, user:mike, taskId: 3, name: Support},{projectId: 1, title: someTitle, user:mike, taskId: 4, name: Finance},{projectId: 1, title: someTitle, user:mike, taskId: 1, name: Sales}. I would like to have a dropdown menu with projectId = 1 and the second dropdown with the different taskId's

martinczerwi Over a year ago

Quite difficult, at the moment I can't figure out a better way, but displaying two dropdowns with all the project ids and task ids: jsfiddle.net/hRz8G/1. This solution doesn't filter the task ids by project id. Maybe restructuring your data is a better approach.

Mike Over a year ago

Hmm, Maybe i should change the structure of my data.. not sure in what way though.. Anyways, thanks for trying to help me!

martinczerwi Over a year ago

This is the best I could figure out: jsfiddle.net/hRz8G/2 I'm getting back to you, if I find a solution

Mike Over a year ago

Yes, thanks man. Oh i just tried a filter. filter:myProject.title and I changed the ng-model of the select to myProject.title. It now only shows 1 of the options i have. So i have to loop through it or somehow

|

Mike · Accepted Answer · 2014-05-27 08:05:33Z

1

So I got the answer. I thought I knew the answer but i didn't.. I did everything the same and this time it worked =S.. Also thanks to you Fiddle I created my drop down list. I filtered the projects with 'myProject.title' but it didn't work. So I outputted the 'myProject' and it gave me this information back.

{"projectId":"1056","title":"someTitle","user":"mike","taskId":"3","name":"Design"}

So when i got this back i thought i filtered it with the whole json file. (which is not true..) But then i changed my select input to ng-change and called a function -> selectedProject(myProject). In that function i got the title of the project and i returned it back. In my second drop down list i changed it to 'filter:selectedProject' and it suddenly worked.. I was like huh? so i thought it would be faster if we just filtered the drop down list with the input of the first. So i filtered it with myProject.title and it also worked.. So i still don't know the answer but this is my code now. The controller code is just some $http.post function

HTML file

<div class='timesheet' ng-controller="timesheetController">

    <div class="" ng-show="signIn">
        <select ng-model="title" ng-options="proj.title for proj in projects | unique:'title'"><option value="">-- choose project --</option></select>
        <select ng-model="taskId" ng-options="proj.name for proj in projects | filter:title.title"></select>
            {{title.title}}{{taskId.name}}
    </div>
</div>

answered May 27, 2014 at 8:05

Mike

1432 silver badges12 bronze badges

2 Comments

martinczerwi Over a year ago

This is a nice solution. I didn't notice you already had the unique filter in place, so you probably use angular-ui or a custom filter like that. I'm OK with you accepting your answer as a solution ;)

Mike Over a year ago

haha, yes. I had some multiple information with different taskId's so I used the unique filter to remove the duplicates. Anyways.. Thanks for your help. =]

Collectives™ on Stack Overflow

How do I set up cascading dropdownlists in Angular?

Html

2 Answers 2

Update

6 Comments

HTML file

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Html

2 Answers 2

Update

6 Comments

HTML file

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related