index.html 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="app">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <link rel="stylesheet" href="../angular-ui-switch.min.css"/>
  8. <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script>
  9. <script src="../angular-ui-switch.js"></script>
  10. <script src="app.js"></script>
  11. </head>
  12. <body>
  13. <form data-ng-controller="MyController">
  14. <switch name="enabled" ng-model="enabled" ng-change="changeCallback"></switch>
  15. <p>
  16. <button ng-click="enabled=!enabled">Toggle</button>
  17. </p>
  18. <p>
  19. Enabled: {{ enabled }}
  20. </p>
  21. <!--Examples of using switch text on/off values. These values can be anything. First example shows basic on/off-->
  22. <switch name="onOff" ng-model="onOff" on="on" off="off"></switch>
  23. <p>
  24. <button ng-click="onOff=!onOff">Toggle</button>
  25. </p>
  26. <p>
  27. Enabled: {{ onOff }}
  28. </p>
  29. <!--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-->
  30. <switch name="yesNo" ng-model="yesNo" on="lorem" off="ipsum" class="wide"></switch>
  31. <p>
  32. <button ng-click="onOff=!onOff">Toggle</button>
  33. </p>
  34. <p>
  35. Enabled: {{ yesNo }}
  36. </p>
  37. </form>
  38. </body>
  39. </html>