| <!DOCTYPE html> |
| <html lang="en" ng-app="app"> |
| <head> |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <link rel="stylesheet" href="../angular-ui-switch.css"/> |
| <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script> |
| <script src="../angular-ui-switch.js"></script> |
| <script src="app.js"></script> |
| </head> |
| <body> |
| |
| <form data-ng-controller="MyController"> |
| <switch name="enabled" ng-model="enabled" ng-change="changeCallback"></switch> |
| <switch name="enabled" ng-model="test" ng-change="changeCallback"></switch> |
| <p> |
| <button ng-click="enabled=!enabled">Toggle</button> |
| </p> |
| <p> |
| Enabled: {{ enabled }} |
| </p> |
| <!--Examples of using switch text on/off values. These values can be anything. First example shows basic on/off--> |
| |
| <switch name="onOff" ng-model="onOff" on="on" off="off"></switch> |
| <p> |
| <button ng-click="onOff=!onOff">Toggle</button> |
| </p> |
| <p> |
| Enabled: {{ onOff }} |
| </p> |
| |
| <!--Examples of using the nonsense words lorem/ipsum in the on/off values. Because these are wider, added an option "wide" class to allow for more room--> |
| <switch name="yesNo" ng-model="yesNo" on="lorem" off="ipsum" class="wide"></switch> |
| <p> |
| <button ng-click="onOff=!onOff">Toggle</button> |
| </p> |
| <p> |
| Enabled: {{ yesNo }} |
| </p> |
| |
| <!--Examples of using switch disabled states. --> |
| <switch name="disabled" ng-model="disabled" disabled="true"></switch> |
| <p> |
| <button ng-click="disabled=!disabled">Toggle</button> |
| </p> |
| <p> |
| Enabled: {{ disabled }} |
| </p> |
| </form> |
| |
| </body> |
| </html> |
