Angular Bootstrap Toggle

Getting Started

Dependencies

This repository contains a set of native AngularJS directives based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required. The only required dependencies are:

AngularJS (requires AngularJS 1.3.x, tested with 1.7.4).
Bootstrap CSS (tested with version 3.3.7).

Installation

You can download the latest version of Angular Bootstrap Toggle or use CDN to load the library.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/angular-bootstrap-toggle@0.4.0/dist/angular-bootstrap-toggle.min.css">
<script src="https://cdn.jsdelivr.net/npm/angular-bootstrap-toggle@0.4.0/dist/angular-bootstrap-toggle.min.js"></script>

Bower Installation

$ bower install angular-bootstrap-toggle --save

As soon as you've got all the files downloaded and included in your page you just need to declare a dependency on the ui.toggle module:

angular.module('myModule', ['ui.toggle']);

Usage

Basic example

value: true

change event triggered times: 0

OnOff

<toggle ng-model="toggleValue" ng-change="changed()"></toggle>

Options

Options can be passed via attributes

EnabledDisabled

<toggle ng-model="toggleValue" ng-change="changed()" on="Enabled" off="Disabled"></toggle>

Name	Type	Default	Description
on	string \| html	`"On"`	Text of the on toggle
off	string \| html	`"Off"`	Text of the off toggle
size	string	`"btn"`	Size class of the toggle. Possible values are:`btn-lg`,`btn`,`btn-sm`,`btn-xs` Refer to Bootstrap Button Sizes documentation for more information.
on-class	string	`"btn-primary"`	Class of the on toggle. Possible values are:`btn-default`,`btn-primary`,`btn-success`,`btn-info`,`btn-warning`,`btn-danger` Refer to Bootstrap Button Options documentation for more information.
off-class	string	`"btn-default"`	Class of the off toggle. Possible values are:`btn-default`,`btn-primary`,`btn-success`,`btn-info`,`btn-warning`,`btn-danger` Refer to Bootstrap Button Options documentation for more information.
toggle-class	string	''	Appends the value to the class attribute of the toggle. This can be used to apply custom styles. Refer to Custom Styles for reference.

Demos

Sizes

Bootstrap toggle is available in different sizes. Refer to Bootstrap Button Sizes documentation for more information.

OnOff

<toggle ng-model="toggleValue" ng-change="changed()" size="btn-lg"></toggle>
<toggle ng-model="toggleValue" ng-change="changed()"></toggle>
<toggle ng-model="toggleValue" ng-change="changed()" size="btn-sm"></toggle>
<toggle ng-model="toggleValue" ng-change="changed()" size="btn-xs"></toggle>

Colors

Bootstrap Toggle supports various colors. Refer to Bootstrap Button Options documentation for more information.

OnOff

<toggle ng-model="toggleValue" ng-change="changed()" on-class="btn-primary"></toggle>
<toggle ng-model="toggleValue" ng-change="changed()" on-class="btn-success"></toggle>
<toggle ng-model="toggleValue" ng-change="changed()" on-class="btn-info"></toggle>
<toggle ng-model="toggleValue" ng-change="changed()" on-class="btn-warning"></toggle>
<toggle ng-model="toggleValue" ng-change="changed()" on-class="btn-danger"></toggle>
<toggle ng-model="toggleValue" ng-change="changed()" on-class="btn-default"></toggle>

Colors Mix

You can style on state as well as the off state.

OnOff

<toggle ng-model="toggleValue" ng-change="changed()" on-class="btn-success" off-class="btn-danger"></toggle>
<toggle ng-model="toggleValue" ng-change="changed()" on-class="btn-warning" off-class="btn-info"></toggle>

Custom Style

Customized styles can be applied as easily.

OnOff

<style>
    .toggle.ios, .toggle-on.ios, .toggle-off.ios {
        border-radius: 20px;
    }
     .toggle.ios .toggle-handle {
        border-radius: 20px;
    }
</style>
<toggle ng-model="toggleValue" ng-change="changed()" toggle-class="ios"></toggle>
<style>
    .toggle.android {
        border-radius: 0px;
    }
     .toggle.android .toggle-handle {
        border-radius: 0px;
    }
</style>
<toggle ng-model="toggleValue" ng-change="changed()" toggle-class="android" on-class="btn-info"></toggle>

Custom Text

The text can be changed easily with attributes or options.

ReadyNot Ready

<toggle ng-model="toggleValue" ng-change="changed()" on="Ready" off="Not Ready" on-class="btn-success" off-class="btn-danger"></toggle>

Icons/Html Text

You can easily add icons or images since html is supported for on/off text.

Play Pause

<toggle ng-model="toggleValue" ng-change="changed()" on="<i class='fa fa-play'></i> Play" off="<i class='fa fa-pause'></i> Pause"></toggle>

Multiple Lines of Text

Toggles with multiple lines will adjust its heights.

Hello
WorldGoodbye
World

<toggle ng-model="toggleValue" ng-change="changed()" on="Hello<br>World" off="Goodbye<br>World"></toggle>

Animation Speed

Transition speed can be easily controlled with css transition property on .toggle-group. You can also turn animation off completely.

OnOff

<style>
    .slow .toggle-group {
        transition: left 0.7s;
        -webkit-transition: left 0.7s;
    }
     .fast .toggle-group {
        transition: left 0.1s;
        -webkit-transition: left 0.1s;
    }
     .quick .toggle-group {
        transition: none;
        -webkit-transition: none;
    }
</style>
<toggle ng-model="toggleValue" ng-change="changed()" toggle-class="slow"></toggle>
<toggle ng-model="toggleValue" ng-change="changed()" toggle-class="fast"></toggle>
<toggle ng-model="toggleValue" ng-change="changed()" toggle-class="quick"></toggle>

Properly Sized (even in hidden elements)

Here's a toggle inside a modal, to prove that we've really fixed the auto-sizing issue!

ShowHide

ng-showOff