Skip to content

SelectBox

Jump to bottom
Evgenii Koriakin edited this page Oct 31, 2016 · 78 revisions

Table of contents

Demo

Demo

Usage

Items as strings

View:

<ma-select-box
    items="ports"
    value="port">
</ma-select-box>

Controller:

$scope.ports = ['Tokai', 'Vladivostok', 'Navlakhi'];
$scope.port = null;

Items as objects

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;

Fields

addItemTooltip

A tooltip which is displayed over the button, which allows to switch from "select" mode to "add" mode.

Type

String

Default value

'Add new item'

Examples

Sets the field:

View:

<ma-select-box
    add-item-tooltip="Create port">
</ma-select-box>

ajax

jQuery AJAX object used to load items remotely.

Type

Object

Default value

null

Examples

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

canAddItem

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.

Type

Boolean

Default value

false

Examples

Sets the field:

View:

<ma-select-box
    can-add-item="true">
</ma-select-box>

canReset

Determines whether a button is displayed allowing the user to empty a previously set value.

Type

Boolean

Default value

false

Examples

Sets the field:

View:

<ma-select-box
    can-reset="true">
</ma-select-box>

canSearch

Determines whether an input field is displayed allowing the user to search through the items.

Type

Boolean

Default value

false

Examples

Sets the field:

View:

<ma-select-box
    can-search="true">
</ma-select-box>

id

Unique identifier of the component.

Type

String

Default value

''

Examples

Sets the field:

View:

<ma-select-box
    id="port">
</ma-select-box>

instance

An object that provides API for the component.

Examples

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();
});

isDisabled

Determines whether the component is disabled.

Type

Boolean

Default value

false

Examples

Sets the field:

View:

<ma-select-box
    is-disabled="true">
</ma-select-box>

isLoading

Determines whether the overlay indicating loading process should be displayed over the component.

Type

Boolean

Default value

false

Examples

Sets the field:

View:

<ma-select-box
    is-loading="true">
</ma-select-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.

Type

Boolean

Default value

false

Examples

Sets the field:

View:

<ma-select-box
    is-required="true">
</ma-select-box>

items

A list of items.

Type

Array

Default value

null

Examples

Sets the field:

View:

<ma-select-box
    items="ports">
</ma-select-box>

Controller:

$scope.ports = ['Tokai', 'Vladivostok', 'Navlakhi'];

itemTemplate

A function used to create a text for each item which will be displayed in the list.

Type

Function

Default value

null

Examples

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 + ')';
};

itemTextField

The name of item field which will be displayed in the list.
The field is relevant only when items is an array of objects.

Type

String

Default value

null

Examples

Sets the field:

View:

<ma-select-box
    item-text-field="name">
</ma-select-box>

itemValueField

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.

Type

String

Default value

null

Examples

Sets the field:

View:

<ma-select-box
    item-value-field="id">
</ma-select-box>

orderBy

AngularJS orderBy expression which is used to order the items.
By default the items are not ordered.

Type

Object

Default value

null

Examples

Sets the field to order items by name:

View:

<ma-select-box
    order-by="'name'">
</ma-select-box>

Controller:

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

placeholder

A placeholder which is displayed in the select field when the value is empty.

Type

String

Default value

null

Examples

Sets the field:

View:

<ma-select-box
    placeholder="Select port">
</ma-select-box>

textPlaceholder

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.

Type

String

Default value

null

Examples

Sets the field:

View:

<ma-select-box
    text-placeholder="Enter port">
</ma-select-box>

showAddItemTooltip

Determines whether addItemTooltip is displayed.

Type

Boolean

Default value

true

Examples

Sets the field:

View:

<ma-select-box
    show-add-item-tooltip="false">
</ma-select-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-select-box
    validators="[portValidator]">
</ma-select-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-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];

Events

blur

Fires when the component loses focus.

Parameters

maValue Object
Value or null if the value is empty.

Examples

Subscribes to blur event:

View:

<ma-select-box
    blur="blur(maValue)">
</ma-select-box>

Controller:

$scope.blur = function(port) {
    // Handle the event.
};

change

Fires when the value is changed by the user.

Parameters

maValue Object
Value or null if the value is empty.

Examples

Subscribes to change event:

View:

<ma-select-box
    change="change(maValue)">
</ma-select-box>

Controller:

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

focus

Fires when the component gets focus.

Parameters

maValue Object
Value or null if the value is empty.

Examples

Subscribes to focus event:

View:

<ma-select-box
    focus="focus(maValue)">
</ma-select-box>

Controller:

$scope.focus = function(port) {
    // Handle the event.
};

API

isValid()

Determines whether the value of the component is valid.

Examples

View:

<ma-select-box
    instance="selectBox">
</ma-select-box>

Controller:

$scope.selectBox = {};

$timeout(function() {
    var isValid = selectBox.isValid();
}, 5000);

switchToAddMode()

Switches the component to "add" mode.

Examples

View:

<ma-select-box
    instance="selectBox">
</ma-select-box>

Controller:

$scope.selectBox = {};

$timeout(function() {
    selectBox.switchToAddMode();
}, 5000);

switchToSelectMode()

Switches the component to "select" mode.

Examples

View:

<ma-select-box
    instance="selectBox">
</ma-select-box>

Controller:

$scope.selectBox = {};

$timeout(function() {
    selectBox.switchToSelectMode();
}, 5000);

validate()

Validates the value and highlights the component accordingly.

Examples

View:

<ma-select-box
    instance="selectBox">
</ma-select-box>

Controller:

$scope.selectBox = {};

$timeout(function() {
    selectBox.validate();
}, 5000);

Editors

CheckBox
DateBox
RadioBox
SelectBox
TextArea
TextBox

Navigation

Button
Tabs

Layout

Form
Grid
Label
Modal

Other

Progress

Services

MaDate

Clone this wiki locally