angular-toggle-switch

Toggle Switches for AngularJS. Based off Bootstrap switch by Matt Lartentis.

Installation

Download angular-toggle-switch.min.js or install with bower.

$ bower install angular-bootstrap-toggle-switch --save

Load angular-toggle-switch.min.js then add the toggle-switch module to your Angular App.

angular.module('app', ['toggle-switch']);

Usage

Switch Value: {{switchState}}

Default

            <toggle-switch
              ng-model="switchStatus">
            </toggle-switch>

Text

            <toggle-switch
              ng-model="switchStatus"
              on-label="sí"
              off-label="no">
            </toggle-switch>

Knob Text

          <toggle-switch
            ng-model="switchStatus"
            knob-label="TV">
          </toggle-switch>

Colors

          <toggle-switch
            ng-model="switchStatus"
            class="switch-primary">
          </toggle-switch>

          <toggle-switch
            ng-model="switchStatus"
            class="switch-info">
          </toggle-switch>

          <toggle-switch
            ng-model="switchStatus"
            class="switch-success">
          </toggle-switch>

          <toggle-switch
            ng-model="switchStatus"
            class="switch-warning">
          </toggle-switch>

          <toggle-switch
            ng-model="switchStatus"
            class="switch-danger">
          </toggle-switch>

          <toggle-switch
            ng-model="switchStatus"
            class="switch-default">
          </toggle-switch>

Sizes


          <toggle-switch
            ng-model="switchStatus"
            class="switch-large">
          </toggle-switch>

          <toggle-switch
            ng-model="switchStatus"
          </toggle-switch>

          <toggle-switch
            ng-model="switchStatus"
            class="switch-small">
          </toggle-switch>

          <toggle-switch
            ng-model="switchStatus"
            class="switch-mini">
          </toggle-switch>

Disabled


          <toggle-switch
            ng-model="switchStatus"
            is-disabled="true">
          </toggle-switch>

HTML


          <toggle-switch
            ng-model="htmlSwitchStatus"
            html="true"
            class="switch-primary switch-large"
            knob-label="HTML"
            on-label="<i class="fa fa-thumbs-up"></i>"
            off-label="<i class="fa fa-thumbs-down"></i>">
          </toggle-switch>

          <toggle-switch
            ng-model="switchStatus"
            html="htmlSwitchStatus"
            class="switch-primary switch-large"
            knob-label="<i class="fa fa-question"></i>"
            on-label="<i class="fa fa-thumbs-up"></i>"
            off-label="<i class="fa fa-thumbs-down"></i>">
          </toggle-switch>