If you have no idea what JQuery Chosen is, it is simply a plugin that makes long, unwieldy select boxes much more user friendly.
Using it with Angular JS is no problem. However, a cleaner and simpler way to use it is to make it as a Directive.
For me, this is how I did it.
I used the ngModel attribute to have the scope listen to any changes to it like setting a default value or when a user selects an item in the dropdown.
I tried to use ngOptions as my first choice and had the scope listen to ngOptions.length or attrs[‘options’].length. However when it gets loaded, since I am getting my list asynchronously from the server, it will throw out an Exception.
Not a program stopper but as a developer, nobody wants to see any kind of error messages in the console no matter how harmless they can be. In my case, since I always set all my ngModels a default value, I decided to listen to this attribute instead.
Before Angular JS, my idea of a cascading dropdown select would be to some dropdown components in my HTML page and loading the children based on its parent.
With Angular JS, I would recommend you avoid this style. Why create so 2 dropdown controls when you can have only one and show the options in a tree like structure together with its parent?
If your hierarchy involves more than 2 levels, you can easily create a directive for it.
For simplicity’s sake, rather than showing 2 dropdown controls and changing the second dropdown based on the parent chosen in the first dropdown, you can use the “group by” keyword in the ng-option attribute of the SELECT tag.
Think of “group by” the same way you do in SQL. Pretty easy, right?
A sample code would be:
ng-option="bt.id_of_child as bt.child_name group by bt.parent_name for bt in batchTypes"