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

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];