Login/Register
AngularJS: ng-model not binding to ng-checked for checkboxes
Asked Answered
Solved angularjsangularjs-ng-modelangularjs-ng-checked
W

7

81

I referred to this before asking this question: AngularJs doesn't bind ng-checked with ng-model

If ng-checked is evaluated to true on the html side, the ng-model is not updated. I can't ng-repeat as suggested in the above question because I have to use some styling for each checkbox.

Here is the plunker that I have created to illustrate my problem.

http://plnkr.co/edit/YsOsPh3vjkPMUUDa6r2t

To see what I want, please open the console, and just click on Submit button. Please don't check any checkboxes.

Wame answered 17/5, 2013 at 3:38 Comment(0)
A
124

ngModel and ngChecked are not meant to be used together.

ngChecked is expecting an expression, so by saying ng-checked="true", you're basically saying that the checkbox will always be checked by default.

You should be able to just use ngModel, tied to a boolean property on your model. If you want something else, then you either need to use ngTrueValue and ngFalseValue (which only support strings right now), or write your own directive.

What is it exactly that you're trying to do? If you just want the first checkbox to be checked by default, you should change your model -- item1: true,.

Edit: You don't have to submit your form to debug the current state of the model, btw, you can just dump {{testModel}} into your HTML (or <pre>{{testModel|json}}</pre>). Also your ngModel attributes can be simplified to ng-model="testModel.item1".

http://plnkr.co/edit/HtdOok8aieBjT5GFZOb3?p=preview

Audra answered 17/5, 2013 at 3:52 Comment(6)
ng-checked is computed to true by a expression. To indicate ng-model is not linked, I used true there. While initiating the controller, I want all the checkboxes to be unchecked. After some ajax request, I compute the ng-checked to check the checkbox. This is when my ng-model is not update. – Wame
@Wame You should not be using ngChecked. Your model is fine, you just need to set testModel.item1 = true in your ajax callback and then call $scope.$apply() to update your view. – Audra
We just made the mistake of using ng-checked in stead of ng-model... never again! – Ibarra
As per the note on docs.angularjs.org/api/ng/directive/ngChecked "Note that this(ngChecked) directive should not be used together with ngModel, as this can lead to unexpected behavior." – Lightly
@Audra i was stucked on this issue for about hours.. your hint $scope.$apply() resolved my issue. Thanks a bunch. – Verjuice
Chiming in as well to say that $scope.$apply() solved my issue as well. This makes the checkbox get checked when the value is set after the ajax call fills in the scope data. – Robber
B
14

You can use ng-value-true to tell angular that your ng-model is a string.

I could only get ng-true-value working if I added the extra quotes like so (as shown in the official Angular docs - https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D)

ng-true-value="'1'"
Benia answered 7/4, 2015 at 11:8 Comment(0)
Z
1

What you could do is use ng-repeat passing in the value of whatever you're iterating on to the ng-checked and from there utilising ng-class to apply your styles depending on the result.

I did something similar recently and it worked for me.

Z answered 18/8, 2016 at 12:51 Comment(0)
O
1

Can Declare As the in ng-init also getting true

<!doctype html>
<html ng-app="plunker" >
  <head>
    <meta charset="utf-8">
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="MainCtrl" ng-init="testModel['item1']= true">
    <label><input type="checkbox" name="test" ng-model="testModel['item1']"  /> Testing</label><br />
    <label><input type="checkbox" name="test" ng-model="testModel['item2']" /> Testing 2</label><br />
    <label><input type="checkbox" name="test" ng-model="testModel['item3']" /> Testing 3</label><br />
    <input type="button" ng-click="submit()" value="Submit" />
  </body>
</html>

And You Can Select the First One and Object Also Shown here true,false,flase

Oe answered 7/12, 2016 at 10:14 Comment(1)
There are only a few appropriate uses of ngInit. This directive can be abused to add unnecessary amounts of logic into your templates. See AngularJS ng-init Directive API Reference. – Convalescence
C
1

The ng-model and ng-checked directives should not be used together

From the Docs:

ngChecked

Sets the checked attribute on the element, if the expression inside ngChecked is truthy.

Note that this directive should not be used together with ngModel, as this can lead to unexpected behavior.

— AngularJS ng-checked Directive API Reference

Instead set the desired initial value from the controller:

<input type="checkbox" name="test" ng-model="testModel['item1']" ̶n̶g̶-̶c̶h̶e̶c̶k̶e̶d̶=̶"̶t̶r̶u̶e̶"̶ />
    Testing<br />
<input type="checkbox" name="test" ng-model="testModel['item2']" /> Testing 2<br />
<input type="checkbox" name="test" ng-model="testModel['item3']" /> Testing 3<br />
<input type="button" ng-click="submit()" value="Submit" />

$scope.testModel = { item1: true };
Convalescence answered 6/7, 2018 at 16:57 Comment(0)
F
0

You don't need ng-checked when you use ng-model. If you're performing CRUD on your HTML Form, just create a model for CREATE mode that is consistent with your EDIT mode during the data-binding:

CREATE Mode: Model with default values only

$scope.dataModel = {
   isItemSelected: true,
   isApproved: true,
   somethingElse: "Your default value"
}

EDIT Mode: Model from database

$scope.dataModel = getFromDatabaseWithSameStructure()

Then whether EDIT or CREATE mode, you can consistently make use of your ng-model to sync with your database.

Forewoman answered 18/9, 2020 at 8:12 Comment(0)
B
0

I had this issue while i am working with the angular js migration from 1.2 to 1.3. The input type checkbox was not triggered if it was initiated from controller as well as the ng change event also not triggered. I tried with all types since ng model along with ng checked wont work. Then ended with simple thing it worked for me like removing the ng change event by replacing with ng click.

Beatabeaten answered 14/12, 2021 at 16:40 Comment(1)
Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Shame

© 2022 - 2024 — McMap. All rights reserved.