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>

item

A string or an object associated with the component, which is set as value when the component is selected.

Type

Object

Default value

null

Examples

Sets the field:

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;

itemTemplate

A function used to create text.

Type

Function

Default value

null

Examples

Sets the field:

View:

<ma-radio-box
    item-template="itemTemplate">
</ma-radio-box>

Controller:

$scope.ports: [{
    id: 0,
    name: 'Tokai',
    country: {
        name: 'Japan'
    }
}, {
    id: 2,
    name: 'Vladivostok',
    country: {
        name: 'Russia'
    }
}, {
    id: 3,
    name: 'Navlakhi',
    country: {
        name: 'India'
    }
}];

$scope.itemTemplate = function(port) {
    return port.name + ' (' + port.country.name + ')';
};

itemTextField

The name of item field which will be used as text.
The field is relevant only when the item is object.

Type

String

Default value

null

Examples

Sets the field:

View:

<ma-radio-box
    item="ports[0]"
    item-text-field="name">
</ma-radio-box>

Controller:

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

itemValueField

The name of item field which will be used as a unique identifier of the item.
The field is relevant only when the item is object.

Type

String

Default value

null

Examples

Sets the field:

View:

<ma-radio-box
    item="ports[0]"
    item-value-field="id">
</ma-radio-box>

Controller:

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

size

Size of the component.
Supported sizes: 'xs', 'sm'.

Type

String

Default value

'xs'

Examples

Sets the field:

View:

<ma-radio-box
    size="sm">
</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];

Events

change

Fires when the value is changed by the user.

Parameters

maValue Object
Value or null if the value is empty.

maOldValue Object
Old value or null if the old value is empty.

Examples

Subscribes to change event:

View:

<ma-radio-box
    change="change(maValue, maOldValue)">
</ma-radio-box>

Controller:

$scope.change = function(port, oldPort) {
    // Handle the event.
};