angular-dropdowns
Dropdown directives for AngularJS (1.1.5+, 1.2.x).
Includes both a select-style dropdown and a menu-style dropdown. The menu-style dropdown attaches to an existing element (button, link, div, etc), whereas the select-style dropdown replaces the element it is attached to.
See examples: http://jseppi.github.io/angular-dropdowns/
Usage
Include ngDropdowns
in your module dependencies:
var app = angular;
In your controller, setup the select options and object to hold the selected value:
app;
And in your html, specify the dropdown-select
and dropdown-model
attributes on an element.
You can optionally set dropdown-item-label
to specify a different label field from the default (which is 'text'):
Dropdown Select You have selected: {{ddSelectSelected}}
For a menu-style dropdown, use dropdown-menu
in place of dropdown-select
:
Dropdown Select You have selected: {{ddSelectSelected}} Menu
You can specify a function to call upon dropdown value change by specifying the dropdown-onchange
attribute. This method will have the selected object passed to it.
You can set dropdown-disabled
to disable the dropdown when the bound value is truthy.
Custom Templates
If you'd like to customize the templates more, you can override the values stored in the following $templateCache
keys:
ngDropdowns/templates/dropdownSelect.html
ngDropdowns/templates/dropdownSelectItem.html
ngDropdowns/templates/dropdownMenu.html
ngDropdowns/templates/dropdownMenuItem.html
To do this, you can put your custom templates in the cache from your app.run()
method. For example:
var app = angular; app;
Developing
Pull requests are welcome!
Run npm install
to get all the development dependencies.
Run gulp
to build the output files.
License
Credits
Styling based on http://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/