Skip to content

Instantly share code, notes, and snippets.

@pklink

pklink/index.html

Created March 19, 2015 10:05
Show Gist options
  • Save pklink/11ef1584f8a3f74d30ba to your computer and use it in GitHub Desktop.
Save pklink/11ef1584f8a3f74d30ba 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" low-id="2" mid-id="4" hi-id="8"></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) {
return {
restrict: 'E',
template: '<input type="checkbox" ng-checked="checked[0]" value="{{lowId}}"><input type="checkbox" ng-checked="checked[1]" value="{{midId}}"><input type="checkbox" ng-checked="checked[2]" value="{{hiId}}">',
scope: {
active: '=',
lowId: '@',
midId: '@',
hiId: '@'
},
link: function(scope, element, attr) {
scope.checked = [false, false, false];
scope.$watch('active', function() {
if (scope.active === scope.lowId) {
return scope.checked = [true, false, false];
} else if (scope.active === scope.midId) {
return scope.checked = [false, true, false];
} else if (scope.active === scope.hiId) {
return scope.checked = [false, false, true];
} else {
return scope.checked = [false, false, false];
}
});
element.find(':checkbox').on('change', function() {
var el, val;
el = angular.element(this);
val = el.val().toString();
return scope.$apply(function() {
if (el.is(':checked')) {
return scope.active = el.val();
} else {
return scope.active = "0";
}
});
});
}
};
});
app.controller('myController', function($scope) {
$scope.active = "4";
$scope.change = function() {
if ($scope.active === "8") {
return $scope.active = "0";
} else {
return $scope.active = "8";
}
};
});
</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" low-id="2" mid-id="4" hi-id="8"></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="{{lowId}}"><input type="checkbox" ng-checked="checked[1]" value="{{midId}}"><input type="checkbox" ng-checked="checked[2]" value="{{hiId}}">'
scope:
active: '='
lowId: '@'
midId: '@'
hiId: '@'
link: (scope, element, attr) ->
scope.checked = [false, false, false]
scope.$watch('active', ->
if scope.active == scope.lowId
scope.checked = [true, false, false]
else if scope.active == scope.midId
scope.checked = [false, true, false]
else if scope.active == scope.hiId
scope.checked = [false, false, true]
else
scope.checked = [false, false, false]
)
element.find(':checkbox').on('change', ->
el = angular.element(this)
val = el.val().toString()
scope.$apply(->
if (el.is(':checked'))
scope.active = el.val()
else
scope.active = "0"
)
)
return
}
)
app.controller('myController', ($scope) ->
$scope.active = "4"
$scope.change = ->
if $scope.active == "8"
$scope.active = "0"
else
$scope.active = "8"
return
)</script></body>
</html>
Raw
jsbin.lacene.js
var app;
app = angular.module('myApp', []);
app.directive('myCheckbox', function($q) {
return {
restrict: 'E',
template: '<input type="checkbox" ng-checked="checked[0]" value="{{lowId}}"><input type="checkbox" ng-checked="checked[1]" value="{{midId}}"><input type="checkbox" ng-checked="checked[2]" value="{{hiId}}">',
scope: {
active: '=',
lowId: '@',
midId: '@',
hiId: '@'
},
link: function(scope, element, attr) {
scope.checked = [false, false, false];
scope.$watch('active', function() {
if (scope.active === scope.lowId) {
return scope.checked = [true, false, false];
} else if (scope.active === scope.midId) {
return scope.checked = [false, true, false];
} else if (scope.active === scope.hiId) {
return scope.checked = [false, false, true];
} else {
return scope.checked = [false, false, false];
}
});
element.find(':checkbox').on('change', function() {
var el, val;
el = angular.element(this);
val = el.val().toString();
return scope.$apply(function() {
if (el.is(':checked')) {
return scope.active = el.val();
} else {
return scope.active = "0";
}
});
});
}
};
});
app.controller('myController', function($scope) {
$scope.active = "4";
$scope.change = function() {
if ($scope.active === "8") {
return $scope.active = "0";
} else {
return $scope.active = "8";
}
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment