Sharing Top Content from the Angular-sphere.

AngularJS checkbox inside directive – Angular.js Recipes – Medium

  • I need to make a web service call when the value of the checkbox is changed.
  • How can I get the value of that checkbox when it is clicked?
  • I want the checkbox confined to the scope of the function() { return { restrict: ‘A’, replace: true, scope:{}, template: ‘div’+ ‘input type=”checkbox” ng-click=”toggleRoomLock()” name=”lockRoom” value=”lock” ng-model=”lockRoom”‘+ ‘/div’, link: function(scope, element, attrs) { scope.toggleRoomLock = function(){ //GET VALUE OF CHECKBOX HERE }; } }}I have tried getting the value using…
  • Change the link function to:function (scope, element, attrs) { scope.lockRoom = false; // initialize to unchecked scope.
  • $watch(‘lockRoom’, function (value) { // value will contain either true or false depending on checked state });}$watch allows you to listen to changes on your models (basically objects added to scope).

So I have a directive that has a checkbox in it. I need to make a web service call when the value of the checkbox is changed. How can I get the value of that checkbox when it is clicked? I want the…

ProblemSo I have a directive that has a checkbox in it. I need to make a web service call when the value of the checkbox is changed. How can I get the value of that checkbox when it is clicked? I want the checkbox confined to the scope of the function() { return { restrict: ‘A’, replace: true, scope:{}, template: ‘div’+ ‘input type=”checkbox” ng-click=”toggleRoomLock()” name=”lockRoom” value=”lock” ng-model=”lockRoom”‘+ ‘/div’, link: function(scope, element, attrs) { scope.toggleRoomLock = function(){ //GET VALUE OF CHECKBOX HERE }; } }}I have tried getting the value using scope.lockRoom but I am getting undefined. Any suggestions?Problem courtesy of: CodesLikeA_MokeySolutionThe easiest way is to remove the ng-click attribute from the template and put a watch on the model. Change the link function to:function (scope, element, attrs) { scope.lockRoom = false; // initialize to unchecked scope.$watch(‘lockRoom’, function (value) { // value will contain either true or false depending on checked state });}$watch allows you to listen to changes on your models (basically objects added to scope).Example plunker (value logged to console).Solution courtesy of: MartinView additional discussion.

AngularJS checkbox inside directive – Angular.js Recipes – Medium