-
-
Save dave-newson/f6c5e9c2f3bc315e292c to your computer and use it in GitHub Desktop.
'use strict'; | |
/** | |
* Bootstrap-toggle Directive | |
* @link https://github.com/minhur/bootstrap-toggle | |
*/ | |
angular.module('toggleCheckbox', []) | |
.directive('toggleCheckbox', function() { | |
/** | |
* Directive | |
*/ | |
return { | |
restrict: 'A', | |
transclude: true, | |
replace: false, | |
require: 'ngModel', | |
link: function ($scope, $element, $attr, require) { | |
var ngModel = require; | |
// update model from Element | |
var updateModelFromElement = function() { | |
// If modified | |
var checked = $element.prop('checked'); | |
if (checked != ngModel.$viewValue) { | |
// Update ngModel | |
ngModel.$setViewValue(checked); | |
$scope.$apply(); | |
} | |
}; | |
// Update input from Model | |
var updateElementFromModel = function() { | |
// Update button state to match model | |
$element.trigger('change'); | |
}; | |
// Observe: Element changes affect Model | |
$element.on('change', function() { | |
updateModelFromElement(); | |
}); | |
// Observe: ngModel for changes | |
$scope.$watch(function() { | |
return ngModel.$viewValue; | |
}, function() { | |
updateElementFromModel(); | |
}); | |
// Initialise BootstrapToggle | |
$element.bootstrapToggle(); | |
} | |
}; | |
}); |
Figured it out...Add
ng-true-value="'on'" ng-false-value="'off'"
note the single quotes within the double quotes.
Thanks for this! Check https://gist.github.com/jjmontesl/54457bf1342edeb218b7 for a version with support for ngDisabled.
Is there an easy way to support a function callback? In several use cases I need to have the control call a function to do some logic and then switch the state.
For me Some times working and some times not working. I included both .css and .js file bootstrap-toggle. Change Event calling two times. so value reset to same value.Can't find why it's calling two times. Please guide me..
How would I be able to apply this directive on checkbox within a ui-grid?
I have tried the following but checkbox states are not changed:
{ name: 'isDeleted', displayName: 'To be Deleted', enableCellEdit: false, type: 'boolean', cellTemplate: '' },
Thanks Dave. Here's the version with ngDisabled that jjmontesl created but not available on gist anymore: https://gist.github.com/grenoult/20ddc6c23d6f06580fce9803521f1ea6
Thanks for putting this together.
Had a question...can you extend your directive to enable binding the input checked=true/false values to specific $scope model string values (e.g. "on" and "off")?