RadioBox

Table of contents

• Demo
• Usage
• Fields
  • hideText
  • isDisabled
  • item
  • itemTemplate
  • itemTextField
  • itemValueField
  • size
  • value
• Events
  • change

Demo

Demo

Usage

Basic

View:

<ma-radio-box
    item="'Yes'"
    value="answer">
</ma-radio-box>
<ma-radio-box
    item="'No'"
    value="answer">
</ma-radio-box>

Controller:

$scope.answer = null;

Items as strings

View:

<ma-radio-box
    item="ports[0]"
    value="port">
</ma-radio-box>
<ma-radio-box
    item="ports[1]"
    value="port">
</ma-radio-box>
<ma-radio-box
    item="ports[2]"
    value="port">
</ma-radio-box>

Controller:

$scope.ports = ['Tokai', 'Vladivostok', 'Navlakhi'];
$scope.port = null;

Items as objects

View:

<ma-radio-box
    item="ports[0]"
    item-text-field="name"
    item-value-field="id"
    value="port">
</ma-radio-box>
<ma-radio-box
    item="ports[1]"
    item-text-field="name"
    item-value-field="id"
    value="port">
</ma-radio-box>
<ma-radio-box
    item="ports[2]"
    item-text-field="name"
    item-value-field="id"
    value="port">
</ma-radio-box>

Controller:

$scope.ports = [{
    id: 1,
    name: 'Tokai'
}, {
    id: 2,
    name: 'Vladivostok'
}, {
    id: 3,
    name: 'Navlakhi'
}];
$scope.port = null;

Fields

hideText

Determines whether the text is displayed.

Type

Boolean

Default value

false

Examples

Sets the field:

View:

<ma-radio-box
    hide-text="true">
</ma-radio-box>

isDisabled

Determines whether the component is disabled.

Type

Boolean

Default value

false

Examples

Sets the field:

View:

<ma-radio-box
    is-disabled="true">
</ma-radio-box>

value

A value of the component which is bound to an outer scope with two-way data binding.

Type

Object

Default value

null

Examples

Sets the field:

View:

<ma-radio-box
    item="ports[0]"
    item-text-field="name"
    item-value-field="id"
    value="port">
</ma-radio-box>
<ma-radio-box
    item="ports[1]"
    item-text-field="name"
    item-value-field="id"
    value="port">
</ma-radio-box>
<ma-radio-box
    item="ports[2]"
    item-text-field="name"
    item-value-field="id"
    value="port">
</ma-radio-box>

Controller:

$scope.ports = [{
    id: 1,
    name: 'Tokai'
}, {
    id: 2,
    name: 'Vladivostok'
}, {
    id: 3,
    name: 'Navlakhi'
}];
$scope.port = $scope.ports[1];