sm-dropdown
Creates a dropdown.

Attributes

model = a variable which represents the currently selected option(s) in the dropdown.
items = the iterable object which populates the options in the dropdown.
label & an expression which uses the item variable to determine what should be the label.
value & an expression which uses the item variable to determine what should be the value.
settings = reference to a settings object to pass to the initialization function.
default-text = a reference to a string to be used as a placeholder when no option(s) are selected.

Callback Attributes

on-init = Callback once the module is initialized, passing the initialized element as the first argument.
on-change = Callback after a dropdown value changes. Receives the name and value of selection and the active menu element.
on-add = Callback after a dropdown selection is added using a multiple select dropdown, only receives the added value.
on-remove = Callback after a dropdown selection is removed using a multiple select dropdown, only receives the removed value.
on-label-create = Callback before a label is added to the dropdown. Allows you to modify a label before it is added. Expects $label to be returned.
on-label-select = Callback after a label is selected by a user.
on-no-results = Callback after a dropdown is searched with no matching values.
on-show = Callback after a dropdown is shown.
on-hide = Callback after a dropdown is hidden.

Example

<sm-dropdown class="selection" model="model0" items="projects" label="item.name"></sm-dropdown>

{"name":"Cornhole Boards","id":456}

<div class="ui selection dropdown" sm-dropdown-bind="">
  <div class="default text">Gender</div>
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="item" data-value="F">Female</div>
    <div class="item" data-value="M">Male</div>
  </div>
</div>

Behavior Directives

These attribute directives invoke a behavior on the component where the attribute value can be one of the following formats:

String

Selector to the dropdown(s) to invoke the behavior when the element with the directive is clicked.

Object

$ @ A selector string.
evt @ The event string which triggers the behavior ('click' by default).
enabled = A boolean value which determines whether or not the behavior should be called when the event occurs.
value = The first argument to pass to the behavior if it requires one.

Example

<sm-button class="teal" sm-dropdown-behavior="'selector'">Execute Simple Behavior</sm-button>
<sm-button class="teal" sm-dropdown-behavior="{$: 'selector', value: scopeValue1, enabled: scopeValue2, evt: 'mouseover'}">Execute Advanced Behavior</sm-button>

<sm-dropdown class="selection dropdown3" model="model3" items="projects" label="item.name" value="item"></sm-dropdown>
<sm-button sm-dropdown-toggle="'.dropdown3'" class="teal">Toggle</sm-button>
<sm-button sm-dropdown-show="'.dropdown3'" class="teal">Show</sm-button>
<sm-button sm-dropdown-hide="'.dropdown3'" class="teal">Hide</sm-button>

<sm-dropdown class="multiple selection dropdown4" model="model4" items="projects" label="item.name" value="item.id" style="width:500px"></sm-dropdown>
<sm-button sm-dropdown-clear="'.dropdown4'" class="teal">Clear</sm-button>

<sm-dropdown class="multiple selection dropdown5" model="model5" items="projects" label="item.name" value="item.id" style="width:500px"></sm-dropdown>
<sm-button sm-dropdown-clear="'.dropdown5'" class="teal">Clear</sm-button>
<sm-button sm-dropdown-restore-defaults="'.dropdown5'" class="teal">Reset Defaults</sm-button>

Dropdown Directives
Create & Control Semantic UI Dropdowns with Angular Directives

sm-dropdown
Creates a dropdown.

Attributes

Callback Attributes

Example

sm-dropdown-bind
A lightweight attribute directive which calls dropdown() on the element with the settings object passed to the attribute. Using this directive means you need to manage the communication between Angular and Semantic UI yourself.

Behavior Directives

String

Object

Example

sm-dropdown-toggle / sm-dropdown-show / sm-dropdown-hide
When a DOM event fires on the element with the directive, it can command dropdown(s) to toggle visibility.

sm-dropdown-clear
When a DOM event fires on the element with the directive, it can command dropdown(s) to clear their current values.

sm-dropdown-restore-defaults
When a DOM event fires on the element with the directive, it can command dropdown(s) to restore their initial values.

sm-dropdown-hide-others
When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-restore-default-text
When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-restore-default-value
When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-save-defaults
When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-set-selected
When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-set-text
When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-set-value
When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-bind-touch-events
When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-mouse-events
When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-bind-intent
When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-unbind-intent
When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-set-active
When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-set-visible
When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-remove-active
When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-remove-visible
When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

Dropdown Directives Create & Control Semantic UI Dropdowns with Angular Directives

sm-dropdown Creates a dropdown.

Attributes

Callback Attributes

Example

sm-dropdown-bind A lightweight attribute directive which calls dropdown() on the element with the settings object passed to the attribute. Using this directive means you need to manage the communication between Angular and Semantic UI yourself.

Behavior Directives

String

Object

Example

sm-dropdown-toggle / sm-dropdown-show / sm-dropdown-hide When a DOM event fires on the element with the directive, it can command dropdown(s) to toggle visibility.

sm-dropdown-clear When a DOM event fires on the element with the directive, it can command dropdown(s) to clear their current values.

sm-dropdown-restore-defaults When a DOM event fires on the element with the directive, it can command dropdown(s) to restore their initial values.

sm-dropdown-hide-others When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-restore-default-text When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-restore-default-value When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-save-defaults When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-set-selected When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-set-text When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-set-value When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-bind-touch-events When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-mouse-events When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-bind-intent When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-unbind-intent When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-set-active When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-set-visible When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-remove-active When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-remove-visible When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

Dropdown Directives
Create & Control Semantic UI Dropdowns with Angular Directives

sm-dropdown
Creates a dropdown.

sm-dropdown-bind
A lightweight attribute directive which calls dropdown() on the element with the settings object passed to the attribute. Using this directive means you need to manage the communication between Angular and Semantic UI yourself.

sm-dropdown-toggle / sm-dropdown-show / sm-dropdown-hide
When a DOM event fires on the element with the directive, it can command dropdown(s) to toggle visibility.

sm-dropdown-clear
When a DOM event fires on the element with the directive, it can command dropdown(s) to clear their current values.

sm-dropdown-restore-defaults
When a DOM event fires on the element with the directive, it can command dropdown(s) to restore their initial values.

sm-dropdown-hide-others
When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-restore-default-text
When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-restore-default-value
When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-save-defaults
When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-set-selected
When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-set-text
When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-set-value
When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-bind-touch-events
When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-mouse-events
When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-bind-intent
When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-unbind-intent
When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-set-active
When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-set-visible
When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-remove-active
When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.

sm-dropdown-remove-visible
When a DOM event fires on the element with the directive, it can command dropdown(s) to execute the behavior.