Skip to content

Instantly share code, notes, and snippets.

@pklink

pklink/index.html

Created March 19, 2015 00:22
Show Gist options
  • Save pklink/df8b9b9ced07aad6a2e7 to your computer and use it in GitHub Desktop.
Save pklink/df8b9b9ced07aad6a2e7 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/lacene
Raw
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-controller="myController">
<my-checkbox active="active"></my-checkbox>
<div>
<button type="button" ng-click="change()">change</button>
<p>Active: <span ng-bind="active"></span></p>
<div>
<script id="jsbin-javascript">
var app;
app = angular.module('myApp', []);
app.directive('myCheckbox', function($q) {
var active;
return {
restrict: 'E',
template: '<input type="checkbox" ng-checked="checked[0]" value="0"><input type="checkbox" ng-checked="checked[1]" value="1">',
scope: active = '=',
link: function(scope, element, attr) {
scope.checked = [false, false];
scope.$watch('active', function() {
if (scope.active === 0) {
return scope.checked = [true, false];
} else if (scope.active === 1) {
return scope.checked = [false, true];
} else {
return scope.checked = [false, false];
}
});
element.find(':checkbox').on('change', function() {
var val;
val = parseInt(angular.element(this).val());
return scope.$apply(function() {
return scope.active = val;
});
});
}
};
});
app.controller('myController', function($scope) {
$scope.active = 1;
$scope.change = function() {
if ($scope.active === 1) {
return $scope.active = 0;
} else {
return $scope.active = 1;
}
};
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-controller="myController">
<my-checkbox active="active"></my-checkbox>
<div>
<button type="button" ng-click="change()">change</button>
<p>Active: <span ng-bind="active"></span></p>
<div>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">app = angular.module('myApp', [])
app.directive('myCheckbox', ($q) ->
{
restrict: 'E'
template: '<input type="checkbox" ng-checked="checked[0]" value="0"><input type="checkbox" ng-checked="checked[1]" value="1">'
scope:
active = '='
link: (scope, element, attr) ->
scope.checked = [false, false]
scope.$watch('active', ->
if scope.active == 0
scope.checked = [true, false]
else if scope.active == 1
scope.checked = [false, true]
else
scope.checked = [false, false]
)
element.find(':checkbox').on('change', ->
val = parseInt(angular.element(this).val())
scope.$apply(->
scope.active = val
)
)
return
}
)
app.controller('myController', ($scope) ->
$scope.active = 1
$scope.change = ->
if $scope.active == 1
$scope.active = 0
else
$scope.active = 1
return
)</script></body>
</html>
Raw
jsbin.lacene.js
var app;
app = angular.module('myApp', []);
app.directive('myCheckbox', function($q) {
var active;
return {
restrict: 'E',
template: '<input type="checkbox" ng-checked="checked[0]" value="0"><input type="checkbox" ng-checked="checked[1]" value="1">',
scope: active = '=',
link: function(scope, element, attr) {
scope.checked = [false, false];
scope.$watch('active', function() {
if (scope.active === 0) {
return scope.checked = [true, false];
} else if (scope.active === 1) {
return scope.checked = [false, true];
} else {
return scope.checked = [false, false];
}
});
element.find(':checkbox').on('change', function() {
var val;
val = parseInt(angular.element(this).val());
return scope.$apply(function() {
return scope.active = val;
});
});
}
};
});
app.controller('myController', function($scope) {
$scope.active = 1;
$scope.change = function() {
if ($scope.active === 1) {
return $scope.active = 0;
} else {
return $scope.active = 1;
}
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment