RadioBox - Marcura/marcura-ui GitHub Wiki
Table of contents
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>
id
Unique identifier of the component which is mandatory for validation to work, that is when isRequired or validation fields are used.
Type
String
Default value
''
Examples
Sets the field:
View:
<ma-radio-box
id="port">
</ma-radio-box>
instance
An object that provides API for the component.
Examples
View:
<ma-radio-box
instance="radioBox">
</ma-radio-box>
Controller:
$scope.radioBox = {};
// API object can be used after the component has been initialized by AngularJS,
// which is often after a timeout or in callback functions.
$timeout(function() {
var isValid = radioBox.isValid();
});
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>
isRequired
Determines whether a value is required.
If value is not selected by the user the component will become invalid and will be highlighted accordingly.
id field has to be set for isRequired field to work properly.
Type
Boolean
Default value
false
Examples
Sets the field:
View:
<ma-radio-box
is-required="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]">
</ma-radio-box>
<ma-radio-box
item="ports[1]">
</ma-radio-box>
<ma-radio-box
item="ports[2]">
</ma-radio-box>
Controller:
$scope.ports = ['Tokai', 'Vladivostok', 'Navlakhi'];
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'
}];
modifier
A single CSS modifier or list of space-separated CSS modifiers to add to the component.
Type
String
Default value
null
Examples
Sets the field:
View:
<ma-radio-box
modifier="horizontal">
</ma-radio-box>
<ma-radio-box
modifier="horizontal highlighted">
</ma-radio-box>
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>
validators
A list of validators which is used to validate the value each time it is changed.
Type
Array
Default value
null
Examples
Sets the field:
View:
<ma-radio-box
validators="[portValidator]">
</ma-radio-box>
Controller:
$scope.portValidator = {
validate: function(port) {
// Check the port somehow and return true or false.
return true;
}
};
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 the event:
View:
<ma-radio-box
change="change(maValue, maOldValue)">
</ma-radio-box>
Controller:
$scope.change = function(port, oldPort) {
// Handle the event.
};
API
isInitialized
Determines whether the component is initialized.
Examples
View:
<ma-radio-box
instance="radioBox">
</ma-radio-box>
Controller:
$scope.radioBox = {};
$timeout(function() {
var isInitialized = radioBox.isInitialized;
}, 5000);
isValid()
Determines whether the value of the component is valid.
Examples
View:
<ma-radio-box
instance="radioBox">
</ma-radio-box>
Controller:
$scope.radioBox = {};
$timeout(function() {
var isValid = radioBox.isValid();
}, 5000);
validate()
Validates the value and highlights the component accordingly.
Examples
View:
<ma-radio-box
instance="radioBox">
</ma-radio-box>
Controller:
$scope.radioBox = {};
$timeout(function() {
radioBox.validate();
}, 5000);