dropdown.js
dropdown.js copied to clipboard
FezVrasta
Angularjs compatible
This version is compatible with angularjs select list generated with ng-options. The code added could maybe be write in a nicer way, feel free to do so.
@PsyStorm25 thank you very much for your contribution. unfortunately i still have issues using your patched file. using the angular directive ng-repeat together with ng-model to create select options an empty select option is always displayed.
Hello webermax,
I think this is an expected behavior from angularjs and it is not dependent on dropdown.js
The empty option is generated when a value referenced by ng-model doesn't exist in a set of options passed to ng-options. This happens to prevent accidental model selection: AngularJS can see that the initial model is either undefined or not in the set of options and don't want to decide model value on its own. http://stackoverflow.com/questions/12654631/why-does-angularjs-include-an-empty-option-in-select
Once an option is selected and so ng-model set, the empty option should disappear.
If you are talking about a different issue, please provide more details (code example) and I could see how to adapt the file.
Here is an example showing the default behavior of angularjs with drop down list: http://codepen.io/PsyStorm25/pen/zBQXaB
ok, i see. the problem occurs when relying on "some black magic casted by a evil wizard" and the select element is loaded within an angular template.
webermax,
Well for me it is working (based on the information you shared).
Be sure to set the 'autoinit' property if you are dynamically loading and injecting a 'select/options' control in the DOM:
$(".select").dropdown({ "autoinit" : ".select" });
Here you can find an example containing 2 drop down lists: http://codepen.io/PsyStorm25/pen/mENXxz
The first one is a ‘select’ generated from markup in the page. Initially it is empty. Below you have 3 buttons to play with: ‘LOAD ITEMS’ is adding items in the list after 1s (to mimic ajax loading) ‘CHANGE ALL ITEMS’ is changing all the collection by a new one ‘CHANGE ITEM LABE’ is changing the item label at index 3 ‘ADD ITEM AT INDEX 2’ is adding a new item in the middle of the collection at index 2.
The second drop down list is the one that could interest you I think. I have created a simple directive using a template to demonstrate it is also working this way.
Hope this helps.
Big update on the file. It is now compatible with optgroup elements and can be combined with angularjs also.
I also changed the use of DOMNodeInserted and DOMNodeRemoved with the more recent MutationObserver because there was a problem I noticed only with Firefox when the select input was loaded from angularjs SPA page (single page application).