Create & Control Semantic UI Checkboxes & Radio Buttons with Angular Directives
optional
required
Checkbox & Radio Button Directives
sm-checkbox
Create a plain checkbox.
Attributes
model=the variable to place the value of the checkbox.label@a string for the label of the checkbox.settings=reference to a settings object to pass to the initialization function.enabled=a value which can enable/disable the checkbox when it changes.checked-value=the value of the model when the checkbox is in a checked state (default is true).unchecked-value=the value of the model when the checkbox is in an unchecked state (default is false).indeterminat-value=the value of the model when the checkbox is in an indeterminate state (default is undefined).children@a selector string of checkboxes that are the 'children' of this checkbox. I.E. the state of this checkbox is determined by the collective state of it's children. When all children are checked - this checkbox is checked. When all children are unchecked - this checkbox is unchecked. When the children have mixed states - this checkbox is indeterminate. When this checkbox is checked it checks all children. When this checkbox is unchecked it unchecks all children.
Callback Attributes
on-init=Callback once the module is initialized, passing the initialized element as the first argument.on-change=Callback after a checkbox is either checked or unchecked.on-checked=Callback after a checkbox is checked.on-indeterminate=Callback after a checkbox is set to undeterminate.on-determinate=Callback after a checkbox is set to determinate.on-unchecked=Callback after a checkbox is unchecked.on-enable=Callback after a checkbox is enabled.on-disable=Callback after a checkbox is disabled.
sm-checkbox-bind
A lightweight attribute directive which calls checkbox() 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.
<div class="ui checkbox" sm-checkbox-bind=""> <input type="checkbox" name="example"> <label>Make my profile visible</label> </div>
sm-radio
Create a plain radio button. Radio buttons and checkboxes use the same checkbox module but are separate directives for convenience.
Attributes
model=the variable to place the value of the radio.label@a string for the label of the radio.name@the name which groups radio buttons together.value=the value of the model if this radio button is selected.settings=reference to a settings object to pass to the initialization function.enabled=a value which can enable/disable the checkbox when it changes.
Callback Attributes
on-init=Callback once the module is initialized, passing the initialized element as the first argument.on-change=Callback after a checkbox is either checked or unchecked.on-checked=Callback after a checkbox is checked.on-unchecked=Callback after a checkbox is unchecked.on-enable=Callback after a checkbox is enabled.on-disable=Callback after a checkbox is disabled.
sm-radio-bind
A lightweight attribute directive which calls checkbox() 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.
<div class="ui radio checkbox" sm-radio-bind=""> <input type="radio" name="radioGroup"> <label>Option #1</label> </div> <br> <div class="ui radio checkbox" sm-radio-bind=""> <input type="radio" name="radioGroup"> <label>Option #2</label> </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 accordion(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-checkbox-behavior="'selector'">Execute Simple Behavior</sm-button> <sm-button class="teal" sm-checkbox-behavior="{$: 'selector', value: scopeValue1, enabled: scopeValue2, evt: 'mouseover'}">Execute Advanced Behavior</sm-button>
sm-checkbox-toggle
When a DOM event fires on the element with the directive, it can command checkbox(es) to toggle their state.
<sm-button class="teal" sm-checkbox-toggle="'.example3'">Toggle</sm-button><br><br> <sm-checkbox model="value3" class="example3" label="Checkbox"></sm-checkbox>
false
sm-checkbox-check / sm-radio-check
When a DOM event fires on the element with the directive, it can command checkbox/radio(s) to the checked state.
<sm-button class="teal" sm-checkbox-check="'.example4'">Check</sm-button><br><br> <sm-checkbox model="value4a" class="example4" label="Checkbox"></sm-checkbox><br> <sm-radio model="value4b" class="example4" label="Radio #1" value="1" name="example4"></sm-radio><br> <sm-radio model="value4b" label="Radio #2" value="2" name="example4"></sm-radio><br>
false / false
sm-checkbox-uncheck
When a DOM event fires on the element with the directive, it can command checkbox(es) to the unchecked state.
<sm-button class="teal" sm-checkbox-uncheck="'.example5'">Uncheck</sm-button><br><br> <sm-checkbox model="value5" class="example5" label="Checkbox"></sm-checkbox>
true
sm-checkbox-indeterminate
When a DOM event fires on the element with the directive, it can command checkbox(es) to the indeterminate state.
<sm-button class="teal" sm-checkbox-indeterminate="'.example6'">Indeterminate</sm-button><br><br> <sm-checkbox model="value6" class="example6" label="Checkbox"></sm-checkbox>
false
sm-checkbox-determinate
When a DOM event fires on the element with the directive, it can command checkbox(es) to a determinate state.
<sm-button class="teal" sm-checkbox-determinate="'.example7'">Determinate</sm-button><br><br> <sm-checkbox model="value7" class="example7" label="Checkbox"></sm-checkbox>
sm-checkbox-enable / sm-radio-enable
When a DOM event fires on the element with the directive, it can command checkbox/radio(s) to become enabled.
<sm-button class="teal" sm-checkbox-enable="'.example8'">Enable</sm-button><br><br> <sm-checkbox model="value8a" class="example8" label="Checkbox" enabled="enabled8"></sm-checkbox><br> <sm-radio model="value8b" class="example8" label="Radio #1" enabled="enabled8" name="example8" value="1"></sm-radio><br> <sm-radio model="value8b" class="example8" label="Radio #2" enabled="enabled8" name="example8" value="2"></sm-radio><br>
sm-checkbox-disable / sm-radio-disable
When a DOM event fires on the element with the directive, it can command checkbox/radio(s) to become disabled.
<sm-button class="teal" sm-checkbox-disable="'.example9'">Disable</sm-button><br><br> <sm-checkbox model="value9a" class="example9" label="Checkbox" enabled="enabled9"></sm-checkbox><br> <sm-radio model="value9b" class="example9" label="Radio #1" enabled="enabled9" name="example9" value="1"></sm-radio><br> <sm-radio model="value9b" class="example9" label="Radio #2" enabled="enabled9" name="example9" value="2"></sm-radio><br>