CheckBox

Table of contents

• Demo
• Usage
• Fields
  • instance
  • isDisabled
  • isRequired
  • rtl
  • size
  • text
  • validators
  • value
• Events
  • change
• API
  • isInitialized
  • isValid()
  • validate()

Demo

Demo

Usage

Basic

View:

<ma-check-box
    text="Balcony"
    value="hasBalcony">
</ma-check-box>

Controller:

$scope.hasBalcony = false;

Fields

instance

An object that provides API for the component.

Examples

View:

<ma-check-box
    instance="checkBox">
</ma-check-box>

Controller:

$scope.checkBox = {};

// 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 = checkBox.isValid();
});

isDisabled

Determines whether the component is disabled.

Type

Boolean

Default value

false

Examples

Sets the field:

View:

<ma-check-box
    is-disabled="true">
</ma-check-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-check-box
    is-required="true">
</ma-check-box>

rtl

Determines whether the component is rendered from right to left.

Type

Boolean

Default value

false

Examples

Sets the field:

View:

<ma-check-box
    rtl="true">
</ma-check-box>

size

Size of the component.
Supported sizes: 'xs', 'sm'.

Type

String

Default value

'xs'

Examples

Sets the field:

View:

<ma-check-box
    size="sm">
</ma-check-box>

text

Text to be displayed.

Type

String

Default value

''

Examples

Sets the field:

View:

<ma-check-box
    text="Balcony">
</ma-check-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-check-box
    validators="[checkBoxValidator]">
</ma-check-box>

Controller:

$scope.checkBoxValidator = {
    validate: function(value) {
        // Check the value 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

Boolean

Default value

false

Examples

Sets the field:

View:

<ma-check-box
    text="Balcony"
    value="hasBalcony">
</ma-check-box>

Controller:

$scope.hasBalcony = false;

Events

change

Fires when the value is changed by the user.

Parameters

maValue Boolean
Value of the component.

Examples

Subscribes to the event:

View:

<ma-check-box
    value="hasBalcony"
    change="change(maValue)">
</ma-check-box>

Controller:

$scope.hasBalcony = false;

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

API

isInitialized

Determines whether the component is initialized.

Examples

View:

<ma-check-box
    instance="checkBox">
</ma-check-box>

Controller:

$scope.checkBox = {};

$timeout(function() {
    var isInitialized = checkBox.isInitialized;
}, 5000);

isValid()

Determines whether the value of the component is valid.

Examples

View:

<ma-check-box
    instance="checkBox">
</ma-check-box>

Controller:

$scope.checkBox = {};

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

validate()

Validates the value and highlights the component accordingly.

Examples

View:

<ma-check-box
    instance="checkBox">
</ma-check-box>

Controller:

$scope.checkBox = {};

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