How do I set up cascading dropdownlists in Angular? - angularjs

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.

Answer 1

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.

Answer 2

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>