CCMS checkbox

CCMS checkbox component

by Disciple_D

HTML

<script src="http://cdn.bootcss.com/angular.js/1.5.6/angular.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.5.6/angular-resource.js"></script>
<script src="http://cdn.bootcss.com/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<script src="http://114.215.169.170:8080/dist/ccms-components.js"></script>
<link rel="stylesheet" href="http://114.215.169.170:8080/dist/ccms-components.css">
<div ng-controller="ctrl" style="padding: 20px">
<h1>Checkbox Demo</h1>
<p>Support Attribute</p>
<ul style="list-style: disc">
	<li style="list-style: inside">ng-model</li>
	<li style="list-style: inside">ng-disabled</li>
	<li style="list-style: inside">ng-checked</li>
	<li style="list-style: inside">ng-change</li>
	<li style="list-style: inside">ng-true-value</li>
	<li style="list-style: inside">ng-false-value</li>
	<li style="list-style: inside">indeterminate</li>
</ul>

<div>
	<h2>Demo 1: normal use.</h2>
	<p>setting ng-model of the component.</p>
	value: {{demo1}}<br/>
	<cc-checkbox ng-model="demo1">demo1: using ng-model</cc-checkbox>
	<cc-checkbox ng-model="demo1">demo1: using ng-model</cc-checkbox>
	<cc-checkbox>no model</cc-checkbox>
	<button ng-click="demo1 = !demo1">change model value</button>
</div>
<div>
	<h2>Demo 2: Using ng-checked.</h2>
	value: {{demo2}}<br/>
	<p><b>NOTE:</b>ng-checked should not use with ng-model.</p>
	<p><b>NOTE:</b>ng-checked is only used to display that will not be changed by clicking check box. if you want to get the status of checkbox, you should change ng-checked into ng-value.</p>

	<cc-checkbox ng-checked="demo2">demo2: using ng-checked</cc-checkbox>
	<cc-checkbox ng-checked="demo2 === false">using expression</cc-checkbox>
	<button ng-click="demo2 = !demo2">change the checked</button>
</div>
<div>
	<h2>Demo 3: Using ng-true-value & ng-false-value.</h2>
	<p>setting ng-model of the component.</p>
	value: {{demo3.state}}<br/>
	<cc-checkbox ng-model="demo3.state" ng-true-value="demo3.trueValue"...

JavaScript

;(function (angular, undefined) {

	'use strict';

	angular
		.module('app', ['ccms.components'])
		.controller('ctrl', function ($scope) {

			$scope.demo2 = false;
			$scope.demo3 = {
				trueValue: 'up',
				falseValue: 'down',
				state: 'up'
			};
			$scope.demo4 = {
				value: false,
				indeterminate: true
			};
			$scope.demo5 = {
				value: false,
				disabled: true
			};

			$scope.change = function () {
				console.log('something changed.');
			}
		});

})(window.angular);