-
Notifications
You must be signed in to change notification settings - Fork 0
SelectBox
View:
<ma-select-box
items="ports"
value="port">
</ma-select-box>
Controller:
$scope.ports = ['Tokai', 'Vladivostok', 'Navlakhi'];
$scope.port = null;
View:
<ma-select-box
items="ports"
value="port"
item-text-field="name"
item-value-field="id">
</ma-select-box>
Controller:
$scope.ports = [{
id: 1,
name: 'Tokai'
}, {
id: 2,
name: 'Vladivostok'
}, {
id: 3,
name: 'Navlakhi'
}];
$scope.port = null;
A tooltip displayed over Add item button.
String
'Add item'
Sets the field:
View:
<ma-select-box
add-item-tooltip="Add port">
</ma-select-box>
jQuery AJAX object used to load items remotely.
Object
null
Sets the field to load items remotely:
View:
<ma-select-box
ajax="ajax">
</ma-select-box>
Controller:
$scope.ajax = {
url: '/ports',
dataType: 'json',
delay: 250,
data: function(parameter) {
return {
name: parameter
};
},
results: function(ports, page) {
_.each(ports, function(port) {
// Setting 'text' property is necessary as it will be displayed in the list.
port.text = port.name;
});
return {
results: ports
};
}
};
By default the user can only select a value from the list.
The option determines whether the user is allowed to type a custom value as well.
Boolean
false
Sets the field:
View:
<ma-select-box
can-add-item="true">
</ma-select-box>
Determines whether the button which allows the user to clear the value is displayed.
Boolean
false
Sets the field:
View:
<ma-select-box
can-reset="true">
</ma-select-box>
Unique identifier of the component.
String
''
Sets the field:
View:
<ma-select-box
id="port">
</ma-select-box>
An object that provides API for the component.
View:
<ma-select-box
instance="selectBox">
</ma-select-box>
Controller:
$scope.selectBox = {};
// 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 = selectBox.isValid();
});
Determines whether the component is disabled.
Boolean
false
Sets the field:
View:
<ma-select-box
is-disabled="true">
</ma-select-box>
Determines whether the overlay indicating loading process should be displayed over the component.
Boolean
false
Sets the field:
View:
<ma-select-box
is-loading="true">
</ma-select-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.
Boolean
false
Sets the field:
View:
<ma-select-box
is-required="true">
</ma-select-box>
A list of items.
Array
null
Sets the field:
View:
<ma-select-box
items="ports">
</ma-select-box>
Controller:
$scope.ports = ['Tokai', 'Vladivostok', 'Navlakhi'];
A function used to create a text for each item which will be displayed in the list.
Function
null
Sets the field:
View:
<ma-select-box
item-template="itemTemplate">
</ma-select-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 displayed in the list.
The field is relevant only when items is an array of objects.
String
null
Sets the field:
View:
<ma-select-box
item-text-field="name">
</ma-select-box>
The name of item field which will be used as a unique identifier of the item. The name can be a property, e.g, id, or a path to a property, e.g. country.id.
The field is relevant only when items is an array of objects.
String
null
Sets the field:
View:
<ma-select-box
item-value-field="id">
</ma-select-box>
Determines whether multiple items can be selected.
Boolean
false
Sets the field:
View:
<ma-select-box
is-multiple="true">
</ma-select-box>
Minimum characters required to trigger AJAX search.
Number
1
Sets the field:
View:
<ma-select-box
min-search-characters="2">
</ma-select-box>
Text to display when no items are found.
String
No items found.
Sets the field:
View:
<ma-select-box
no-items-found-text="No ports found.">
</ma-select-box>
A placeholder which is displayed in the select field when the value is empty.
String
null
Sets the field:
View:
<ma-select-box
placeholder="Select port">
</ma-select-box>
A placeholder which is displayed in the text field when the value is empty.
The text field is a field which is displayed only when canAddItem is true.
String
null
Sets the field:
View:
<ma-select-box
text-placeholder="Enter port">
</ma-select-box>
A tooltip displayed over Select item button.
String
'Select item'
Sets the field:
View:
<ma-select-box
select-item-tooltip="Select port">
</ma-select-box>
Determines whether addItemTooltip is displayed.
Boolean
true
Sets the field:
View:
<ma-select-box
show-add-item-tooltip="false">
</ma-select-box>
A list of validators which is used to validate the value each time it is changed.
Array
null
Sets the field:
View:
<ma-select-box
validators="[portValidator]">
</ma-select-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-select-box
value="port">
</ma-select-box>
Controller:
$scope.ports = [{
id: 1,
name: 'Tokai'
}, {
id: 2,
name: 'Vladivostok'
}, {
id: 3,
name: 'Navlakhi'
}];
$scope.port = $scope.ports[1];
Fires when the component loses focus.
maValue Object
Value or null if the value is empty.
Subscribes to the event:
View:
<ma-select-box
blur="blur(maValue)">
</ma-select-box>
Controller:
$scope.blur = function(port) {
// Handle the event.
};
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-select-box
change="change(maValue, maOldValue)">
</ma-select-box>
Controller:
$scope.change = function(port) {
// Handle the event.
};
Fires when the component gets focus.
maValue Object
Value or null if the value is empty.
Subscribes to the event:
View:
<ma-select-box
focus="focus(maValue)">
</ma-select-box>
Controller:
$scope.focus = function(port) {
// Handle the event.
};
Fires when the component is initialized.
maInstance Object
The current instance of the component.
Subscribes to the event:
View:
<ma-select-box
init="init(maInstance)">
</ma-select-box>
Controller:
$scope.init = function(selectBox) {
var isInitialized = selectBox.isInitialized;
};
Clears the value and sets the component to the initial untouched state.
View:
<ma-select-box
instance="selectBox">
</ma-select-box>
Controller:
$scope.selectBox = {};
$timeout(function() {
selectBox.clear();
}, 5000);
Returns a validator which has not passed the validation.
View:
<ma-select-box
instance="selectBox">
</ma-select-box>
Controller:
$scope.selectBox = {};
$timeout(function() {
var failedValidator = selectBox.failedValidator();
}, 5000);
Determines whether the component is initialized.
View:
<ma-date-box
instance="selectBox">
</ma-date-box>
Controller:
$scope.selectBox = {};
$timeout(function() {
var isInitialized = selectBox.isInitialized;
}, 5000);
Determines whether the value of the component is valid.
View:
<ma-select-box
instance="selectBox">
</ma-select-box>
Controller:
$scope.selectBox = {};
$timeout(function() {
var isValid = selectBox.isValid();
}, 5000);
Returns current mode ('add' or 'select').
View:
<ma-select-box
instance="selectBox">
</ma-select-box>
Controller:
$scope.selectBox = {};
$timeout(function() {
var mode = selectBox.mode();
}, 5000);
Toggles component between "select" and "add".
mode String
Mode to toggle to ('add' or 'select').
View:
<ma-select-box
instance="selectBox">
</ma-select-box>
Controller:
$scope.selectBox = {};
$timeout(function() {
selectBox.mode('add');
}, 5000);
Validates the value and highlights the component accordingly.
View:
<ma-select-box
instance="selectBox">
</ma-select-box>
Controller:
$scope.selectBox = {};
$timeout(function() {
selectBox.validate();
}, 5000);