Angularjs compatible #49

Open
wants to merge 5 commits into
from

Projects

None yet

2 participants

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 PsyStorm25 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.
c364171

@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.

PsyStorm25 commented Aug 23, 2016 edited

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.

@PsyStorm25 PsyStorm25 Fixed minor issues
Added code to fix an issue on the selected item style when setting the selected value back to 'undefined'.
Changed the code ordering the item. Now it exactly match the 'option' order from native select control.
cae7c52

I have added a new version fixing some minor issues.

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.

PsyStorm25 added some commits Aug 30, 2016
@PsyStorm25 PsyStorm25 Empty option fix
Fixing a bug with "empty" option.
5344d63
@PsyStorm25 PsyStorm25 OptGroup, MutationObserver
Big update on the files.
It is now compatible with optgroup element 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).
71e075e

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).

@PsyStorm25 PsyStorm25 Fixed a bug on IE.
Fixed a bug on IE when there was an empty value in the dropdown.
ab51af8

I fixed a bug on IE when there was an empty value in the dropdown.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment