Skip to content

Instantly share code, notes, and snippets.

@pklink

pklink/index.html

Created March 25, 2015 18:03
Show Gist options
  • Save pklink/f45493aedc3b46513a17 to your computer and use it in GitHub Desktop.
Save pklink/f45493aedc3b46513a17 to your computer and use it in GitHub Desktop.
Download ZIP
angular radio-group-directive based on semantic-ui's toggle checkbox // source http://jsbin.com/kulajo
Raw
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta name="description" content="angular radio-group-directive based on semantic-ui's toggle checkbox ">
<script data-require="jquery@*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<link data-require="semantic-ui@*" data-semver="1.11.4" rel="stylesheet" href="http://cdn.jsdelivr.net/semantic-ui/1.11.4/semantic.min.css" />
<script data-require="semantic-ui@*" data-semver="1.11.4" src="http://cdn.jsdelivr.net/semantic-ui/1.11.4/semantic.min.js"></script>
<script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="myController">
<roles roles="roles" low-id="1" mid-id="2" hi-id="3"></roles>
<div>
<button type="button" ng-click="changeRoles()">change roles</button>
<p>Roles <span ng-bind="roles"></span></p>
<script type="text/ng-template" id="_checkbox.html">
<div class="ui toggle checkbox">
<input type="checkbox" name="public">
<label>Subscribe to weekly newsletter</label>
</div>
</script>
<script type="text/ng-template" id="_roles.html">
<my-checkbox checked="lowChecked"></my-checkbox><br />
<my-checkbox checked="midChecked"></my-checkbox><br />
<my-checkbox checked="hiChecked"></my-checkbox><br />
</script>
<script id="jsbin-javascript">
var app,
__indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
app = angular.module('myApp', []);
app.directive('myCheckbox', function() {
return {
restrict: 'E',
scope: {
checked: '='
},
templateUrl: '_checkbox.html',
link: function(scope, element, attr) {
var redraw;
element = angular.element(element);
redraw = function() {
if (scope.checked) {
return element.checkbox('check');
} else {
return element.checkbox('uncheck');
}
};
scope.$watch('checked', function(newValue, oldValue) {
if (newValue !== oldValue) {
return redraw();
}
});
element.checkbox({
fireOnInit: false,
onChecked: function() {
return scope.$applyAsync(function() {
return scope.checked = true;
});
},
onUnchecked: function() {
return scope.$applyAsync(function() {
return scope.checked = false;
});
}
});
return redraw();
}
};
});
app.directive('roles', function() {
return {
restrict: 'E',
scope: {
roles: '=',
lowId: '@',
midId: '@',
hiId: '@'
},
templateUrl: '_roles.html',
link: function(scope, element) {
var add, remove;
add = function(id) {
return scope.$applyAsync(function() {
var roles;
roles = scope.roles;
roles.push(id);
return scope.roles = scope.roles.slice();
});
};
remove = function(id) {
var arr, value, _i, _len, _ref;
arr = [];
_ref = scope.roles;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
value = _ref[_i];
if (value === id) {
continue;
}
arr.push(value);
}
return scope.$applyAsync(function() {
return scope.roles = arr;
});
};
scope.lowChecked = false;
scope.midChecked = false;
scope.hiChecked = false;
scope.$watch('roles', function() {
return scope.$applyAsync(function() {
var _ref, _ref1, _ref2;
scope.lowChecked = (_ref = scope.lowId, __indexOf.call(scope.roles, _ref) >= 0);
scope.midChecked = (_ref1 = scope.midId, __indexOf.call(scope.roles, _ref1) >= 0);
return scope.hiChecked = (_ref2 = scope.hiId, __indexOf.call(scope.roles, _ref2) >= 0);
});
});
scope.$watch('lowChecked', function(value, old) {
if (value === old) {
return;
}
if (value) {
return add(scope.lowId);
} else {
return remove(scope.lowId);
}
});
scope.$watch('midChecked', function(value, old) {
if (value === old) {
return;
}
if (value) {
return add(scope.midId);
} else {
return remove(scope.midId);
}
});
return scope.$watch('hiChecked', function(value, old) {
if (value === old) {
return;
}
if (value) {
return add(scope.hiId);
} else {
return remove(scope.hiId);
}
});
}
};
});
app.controller('myController', function($scope) {
$scope.roles = ["1"];
return $scope.changeRoles = function() {
return $scope.roles = ["1", "2", "4"];
};
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta name="description" content="angular radio-group-directive based on semantic-ui's toggle checkbox ">
<script data-require="jquery@*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"><\/script>
<link data-require="semantic-ui@*" data-semver="1.11.4" rel="stylesheet" href="//cdn.jsdelivr.net/semantic-ui/1.11.4/semantic.min.css" />
<script data-require="semantic-ui@*" data-semver="1.11.4" src="//cdn.jsdelivr.net/semantic-ui/1.11.4/semantic.min.js"><\/script>
<script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"><\/script>
<script src="script.js"><\/script>
</head>
<body ng-controller="myController">
<roles roles="roles" low-id="1" mid-id="2" hi-id="3"></roles>
<div>
<button type="button" ng-click="changeRoles()">change roles</button>
<p>Roles <span ng-bind="roles"></span></p>
<script type="text/ng-template" id="_checkbox.html">
<div class="ui toggle checkbox">
<input type="checkbox" name="public">
<label>Subscribe to weekly newsletter</label>
</div>
<\/script>
<script type="text/ng-template" id="_roles.html">
<my-checkbox checked="lowChecked"></my-checkbox><br />
<my-checkbox checked="midChecked"></my-checkbox><br />
<my-checkbox checked="hiChecked"></my-checkbox><br />
<\/script>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">app = angular.module('myApp', [])
app.directive('myCheckbox', ->
{
restrict: 'E'
scope:
checked: '='
templateUrl: '_checkbox.html'
link: (scope, element, attr) ->
element = angular.element(element)
redraw = ->
if scope.checked
element.checkbox('check')
else
element.checkbox('uncheck')
scope.$watch('checked', (newValue, oldValue) ->
if newValue != oldValue then redraw()
)
# init checkbox
element.checkbox(
fireOnInit: false
onChecked: -> scope.$applyAsync(-> scope.checked = true)
onUnchecked: -> scope.$applyAsync(-> scope.checked = false)
)
redraw()
}
)
app.directive('roles', ->
{
restrict: 'E'
scope:
roles: '='
lowId: '@'
midId: '@'
hiId: '@'
templateUrl: '_roles.html'
link: (scope, element) ->
add = (id) ->
scope.$applyAsync(->
roles = scope.roles
roles.push(id)
scope.roles = scope.roles.slice()
)
remove = (id) ->
arr = []
for value in scope.roles
if value == id then continue
arr.push(value)
scope.$applyAsync(->
scope.roles = arr
)
# alle checkboxen zuruecksetzen
scope.lowChecked = false
scope.midChecked = false
scope.hiChecked = false
scope.$watch('roles', () ->
scope.$applyAsync(->
scope.lowChecked = scope.lowId in scope.roles
scope.midChecked = scope.midId in scope.roles
scope.hiChecked = scope.hiId in scope.roles
)
)
scope.$watch('lowChecked', (value, old) ->
if value == old then return
if value then add(scope.lowId) else remove(scope.lowId)
)
scope.$watch('midChecked', (value, old) ->
if value == old then return
if value then add(scope.midId) else remove(scope.midId)
)
scope.$watch('hiChecked', (value, old) ->
if value == old then return
if value then add(scope.hiId) else remove(scope.hiId)
)
}
)
app.controller('myController', ($scope) ->
$scope.roles = ["1"]
$scope.changeRoles = ->
$scope.roles = ["1", "2", "4"]
)</script></body>
</html>
Raw
jsbin.kulajo.js
var app,
__indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
app = angular.module('myApp', []);
app.directive('myCheckbox', function() {
return {
restrict: 'E',
scope: {
checked: '='
},
templateUrl: '_checkbox.html',
link: function(scope, element, attr) {
var redraw;
element = angular.element(element);
redraw = function() {
if (scope.checked) {
return element.checkbox('check');
} else {
return element.checkbox('uncheck');
}
};
scope.$watch('checked', function(newValue, oldValue) {
if (newValue !== oldValue) {
return redraw();
}
});
element.checkbox({
fireOnInit: false,
onChecked: function() {
return scope.$applyAsync(function() {
return scope.checked = true;
});
},
onUnchecked: function() {
return scope.$applyAsync(function() {
return scope.checked = false;
});
}
});
return redraw();
}
};
});
app.directive('roles', function() {
return {
restrict: 'E',
scope: {
roles: '=',
lowId: '@',
midId: '@',
hiId: '@'
},
templateUrl: '_roles.html',
link: function(scope, element) {
var add, remove;
add = function(id) {
return scope.$applyAsync(function() {
var roles;
roles = scope.roles;
roles.push(id);
return scope.roles = scope.roles.slice();
});
};
remove = function(id) {
var arr, value, _i, _len, _ref;
arr = [];
_ref = scope.roles;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
value = _ref[_i];
if (value === id) {
continue;
}
arr.push(value);
}
return scope.$applyAsync(function() {
return scope.roles = arr;
});
};
scope.lowChecked = false;
scope.midChecked = false;
scope.hiChecked = false;
scope.$watch('roles', function() {
return scope.$applyAsync(function() {
var _ref, _ref1, _ref2;
scope.lowChecked = (_ref = scope.lowId, __indexOf.call(scope.roles, _ref) >= 0);
scope.midChecked = (_ref1 = scope.midId, __indexOf.call(scope.roles, _ref1) >= 0);
return scope.hiChecked = (_ref2 = scope.hiId, __indexOf.call(scope.roles, _ref2) >= 0);
});
});
scope.$watch('lowChecked', function(value, old) {
if (value === old) {
return;
}
if (value) {
return add(scope.lowId);
} else {
return remove(scope.lowId);
}
});
scope.$watch('midChecked', function(value, old) {
if (value === old) {
return;
}
if (value) {
return add(scope.midId);
} else {
return remove(scope.midId);
}
});
return scope.$watch('hiChecked', function(value, old) {
if (value === old) {
return;
}
if (value) {
return add(scope.hiId);
} else {
return remove(scope.hiId);
}
});
}
};
});
app.controller('myController', function($scope) {
$scope.roles = ["1"];
return $scope.changeRoles = function() {
return $scope.roles = ["1", "2", "4"];
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment