AngularJS: Checkbox button directive
Directive is to custom checbox
by masudcsesust04
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<div ng-app="myApp" ng-controller="AppCtrl">
<buttons-checkbox class="btn-group" data-toggle="buttons-checkbox" model='pRoles' options='roles'></buttons-checkbox>
<br /><br />
<pre>selectd roles = {{pRoles}}</pre>
<pre>roles = {{roles | json}}</pre>
</div>
JavaScript
'use strict';
var app = angular.module('myApp', ['app.filters', 'app.directives']);
app.controller('AppCtrl', function($scope, $filter){
$scope.roles = [
{"id": 1, "name": "Manager", "assignable": true},
{"id": 2, "name": "Developer", "assignable": true},
{"id": 3, "name": "Reporter", "assignable": true}
]
$scope.hello = 'Hello world';
$scope.pRoles = [];
});
var app_filters = angular.module('app.filters', []);
/*
* Filter to check a element in an array
* @param array
* @param value
* @return boolean
**/
app_filters.filter('isInclude', [function() {
return function(array, value) {
if(angular.isArray(array) && angular.isDefined(value)) {
for(var i=0; i<array.length; i++) {
if(angular.equals(array[i], value.toString())) {
return true;
break;
}
}
}
return false;
}
}]);
/*
* Filter to find an element in an array then remove
* @param array
* @param value
* @return Array
**/
app_filters.filter('findAndRemove', [function() {
return function(array, value) {
if(angular.isArray(array) && angular.isDefined(value)) {
for(var i=0; i<array.length; i++) {
if(angular.equals(array[i], value.toString())) {
array.splice(i, 1);
break;
}
}
return array;
}
return array;
}
}]);
var app_directives = angular.module('app.directives', []);
app_directives.directive('buttonsCheckbox', function($filter) {
return {
restrict: 'E',
scope: {
model: '=',
options: '='
},
controller: function($scope) {
$scope.activate = function(option) {
angular.element("#role_"+option).toggleClass("active");
if($filter('isInclude')($scope.model, option)) {
$scope.model =...