angular-ui-switch
Version:
iOS 7 style switch directive for AngularJS
53 lines (47 loc) • 1.69 kB
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>
<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>