3

I have some logic that on certain senario, I want the first check box to be alway checked. So if user tries to uncheck it, I want to use ng-click to change the ng-model binded to the checkbox to 'true'. But the checkbox is still being unchecked....

How do I achieve keep the checkbox remains checked based on the ng-model's value, without using something like angular.element(elem).attr("checked", true)

<input type = 'checkbox' ng-model = 'checkboxValue' ng-click = "handler"/>

in the controller

$scope.checkboxValue = false;
$scope.handler = function(){
    $scope.checkboxValue = true;
}

I want the checkbox remain checked since the ng-model checkboxValue is true...but apparently I missed something here

Here's the plunker:http://plnkr.co/edit/WbjZilFLDfbP3mQ4oMgx?p=preview

I stepped into the call stack, looks like I set the ng-model to true, then during $digest, the ng-model is set based on the checkbox's status : checked or unchecked. So it is more like one way binding: bindding the ng-model based on the checkbox status?

snailclimbingtree
  • 72
  • 1
  • 1
  • 7
  • Check this answer: https://stackoverflow.com/questions/18642371/checkbox-not-binding-to-scope-in-angularjs#answer-23943930 – Eliut Islas Jun 29 '17 at 18:19

4 Answers4

5

Simply use ng-change instead of ng-click

Here is a DEMO

iJade
  • 23,144
  • 56
  • 154
  • 243
  • Update:Oh it just occured to me that is it becuase ng-change happends later than ng-click, it actually fired when the ng-model value changed to true/false after ng-click is fired?

    Thank you for the answer. I do have a logic in click handler to see if the checkbox state is from check to uncheck, if yes, set the checkboxvalue to true. Why this is not working? ng-change and ng-click both fired every time of clicking...My mind must be short-circled.. ;/     – snailclimbingtree Jun 26 '14 at 17:54
  • Though you can do this with ng-change, resetting the value on change is not considered a good User Experience. Ideally, you should disable the check box if it is not allowed to change the value. – Darshan Joshi Jun 27 '14 at 11:10
  • @DarshanJoshi: Thanks for the suggestion. You and the guys below are right, the checkbox should be disabled if it is not allowed to change. – snailclimbingtree Jul 01 '14 at 23:58
  • @snailclimbingtree glad that we could help you. :) – Darshan Joshi Jul 02 '14 at 08:32
1

If you don't want to allow users to uncheck the check box, you can use ng-disabled directive.

A plunk with fork from your plunk. http://plnkr.co/edit/Y2kUYN2F5bZboaPJWMd8?p=preview

Cœur
  • 37,241
  • 25
  • 195
  • 267
Darshan Joshi
  • 362
  • 1
  • 11
  • Thank you for the info. Most of the time, the checkbox is still checkable. Just in some case prevent user from unchecking it. :) – snailclimbingtree Jun 26 '14 at 17:43
  • Hi, You can check the updated plunk. ng-disabled can be bound to any angular expression. You can also, bind it to a function. For the cases where you need to prevent user from unchecking, the function can return false. – Darshan Joshi Jun 27 '14 at 11:08
1

Why not simply use ng-change to call some logic with each change to the checkbox state?

ŁukaszBachman
  • 33,595
  • 11
  • 64
  • 74
  • Thank you for the advice .I will try that. I am not quiet sure why this will help though, cause in the ng-click , I am already checking the state changes....For the checkbox, doens't click change the checkbox anyway? I mean you click once, the checkbox either change from check to uncheck or the other way around? – snailclimbingtree Jun 26 '14 at 17:45
0

You can watch the checkboxValue for changes and then change it however you like rather than hooking in through ng-click. If you wanted behavior where the checkbox is initially false, and then true forever once clicked you could do something like:

$scope.checkboxValue = false;
$scope.$watch('checkboxValue', function(newValue, oldValue){
    $scope.checkboxValue = newValue || oldValue;
});

Here's the required changes to your plunker: http://plnkr.co/edit/XPZXSzsnaZDGlIi8mxnM?p=preview

dustyrockpyle
  • 3,184
  • 17
  • 12