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:

This one was a pain. I did not expect that JQuery Uniform has this behavior of requiring users to call the update() function in order to display a dropdown’s newly selected value.

Since JQuery Uniform was about styling, I never really bothered to think that this was the culprit.

Anyway, to have the dropdown display the newly selected value, make sure you call the update() function like this:

Or, if you have no care about performance issues, then you can call the same function without any parameter to update all form field elements like this:

Related Posts Plugin for WordPress, Blogger...