RadioBox
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;
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;
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;
Determines whether the text is displayed.
Boolean
false
Sets the field:
View:
<ma-radio-box
hide-text="true">
</ma-radio-box>
Unique identifier of the component which is mandatory for validation to work, that is when isRequired or validation fields are used.
String
''
Sets the field:
View:
<ma-radio-box
id="port">
</ma-radio-box>
An object that provides API for the component.
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();
});
Determines whether the component is disabled.
Boolean
false
Sets the field:
View:
<ma-radio-box
is-disabled="true">
</ma-radio-box>
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.
Boolean
false
Sets the field:
View:
<ma-radio-box
is-required="true">
</ma-radio-box>
A string or an object associated with the component, which is set as value when the component is selected.
Object
null
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'];
A function used to create text.
Function
null
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 + ')';
};
The name of item field which will be used as text.
The field is relevant only when the item is object.
String
null
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'
}];
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.
String
null
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'
}];
A single CSS modifier or list of space-separated CSS modifiers to add to the component.
String
null
Sets the field:
View:
<ma-radio-box
modifier="horizontal">
</ma-radio-box>
<ma-radio-box
modifier="horizontal highlighted">
</ma-radio-box>
Size of the component.
Supported sizes: 'xs', 'sm'.
String
'xs'
Sets the field:
View:
<ma-radio-box
size="sm">
</ma-radio-box>
A list of validators which is used to validate the value each time it is changed.
Array
null
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;
}
};
A value of the component which is bound to an outer scope with two-way data binding.
Object
null
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];
Fires when the value is changed by the user.
maValue Object
Value or null if the value is empty.
maOldValue Object
Old value or null if the old value is empty.
Subscribes to the event:
View:
<ma-radio-box
change="change(maValue, maOldValue)">
</ma-radio-box>
Controller:
$scope.change = function(port, oldPort) {
// Handle the event.
};
Determines whether the component is initialized.
View:
<ma-radio-box
instance="radioBox">
</ma-radio-box>
Controller:
$scope.radioBox = {};
$timeout(function() {
var isInitialized = radioBox.isInitialized;
}, 5000);
Determines whether the value of the component is valid.
View:
<ma-radio-box
instance="radioBox">
</ma-radio-box>
Controller:
$scope.radioBox = {};
$timeout(function() {
var isValid = radioBox.isValid();
}, 5000);
Validates the value and highlights the component accordingly.
View:
<ma-radio-box
instance="radioBox">
</ma-radio-box>
Controller:
$scope.radioBox = {};
$timeout(function() {
radioBox.validate();
}, 5000);