Skip to content

Instantly share code, notes, and snippets.

Created December 10, 2014 13:20
Show Gist options
  • Save gkilmain/ddb8b6c4949c8db316db to your computer and use it in GitHub Desktop.
Save gkilmain/ddb8b6c4949c8db316db to your computer and use it in GitHub Desktop.
custom checkbox
angular.module('app', [])
.controller('MainCtrl', MainCtrl)
.directive('checkBox', checkBox);
function checkBox() {
var directive = {
controller: Controller,
link: link,
restrict: 'E',
require: 'ngModel',
scope: {
ngModel: '=',
forId: '@'
template: '<input type="checkbox" id="{{forId}}" ngModel="user.isFamous">' +
'<label class="custom" for="{{forId}}">Checkbox</label>'
return directive;
function link(scope, element, attrs, ngModel) {
scope.$watch('scope.ngModel', function (value){
console.log('checked', value);
function Controller($scope) {
$scope.ngModel = false;
$scope.$watch($scope.ngModel, function(v) {
console.log('nothings changed man!');
function MainCtrl($scope) {
$scope.user = {};
$scope.user.isAdmin = false;
// $scope.user.isFamous = true;
<!DOCTYPE html>
<html lang="en" ng-app="app">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Angular TODO</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="//"></script>
<script src="//"></script>
<script src="app.js"></script>
<!-- <script src="//"></script> -->
<div class="container" ng-controller="MainCtrl">
<form name="userForm">
<div class="form-group">
<input type="text" class="form-control" ng-model="">
<div class="form-group">
<input type="text" class="form-control" ng-model="">
<div class="form-group">
<label for="admin">Admin</label>
<input type="checkbox" id="admin" ng-model="user.isAdmin">
<div class="form-group checkbox">
<check-box ng-model="ngModel" for-id="famous"></check-box>
<pre>{{user | json}}</pre>
input[type=checkbox].custom {
display: none;
.custom {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
font-size: 13px;
.custom:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border-radius: 3px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 1px;
background-color: #aaa;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
input[type=checkbox]:checked + .custom:before {
content: "\2713";
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
font-size: 15px;
color: #f3f3f3;
text-align: center;
line-height: 15px;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment