pwSwitch for AngularJS

Turn boring checkboxes into pretty switches. An AngularJS directive for the pswitch library.

Demo

http://pedrocatre.github.io/pwSwitch/#/

Install

bower install angular-pwSwitch --save

Usage Example

Inject in the dependencies:

angular.module('app', [
        'pwSwitch'
    ]);

And use the directive in a template:

<pw-switch ng-model="switchValue"></pw-switch>

To display labels on the sides of the switch for the on and off state, define two data attributes on the directive. The switch will be displayed without labels if you do not specify them.

<pw-switch ng-model="switchValue"
data-checked="activated"
data-unchecked="deactivated">
</pw-switch>

Like a checkbox you can specify ng-true-value and ng-false-value to specify the value to which the expression should be set when selected. you can read more about it in the AngularJS docs. And here is an example of that:

<pw-switch ng-model="switchValue"
ng-true-value="'ACTIVE'"
ng-false-value="'DEACTIVATED'"
data-checked="activated"
data-unchecked="deactivated">
</pw-switch>

Dependencies

This plugin uses AngularJS version 1.x and the pswitch library and jQuery.

Browser compatibility

Chrome, Safari, Firefox, IE9+

License

The code in this repository can be used under the MIT License.