AngularJS ng-model not binding to ng-checked for checkboxes

Question

I referred to this before asking this question   AngularJs doesn  39 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   Thanks in advance

User · Accepted Answer

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  lt pre gt   testModel json   lt  pre gt     Also your ngModel attributes can be simplified to ng-model  testModel item1    http   plnkr co edit HtdOok8aieBjT5GFZOb3 p preview

User · Answer

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   lt input type  quot checkbox quot  name  quot test quot  ng-model  quot testModel  item1   quot   n g - c h e c k e d    quot  t r u e  quot     gt      Testing lt br   gt   lt input type  quot checkbox quot  name  quot test quot  ng-model  quot testModel  item2   quot    gt  Testing 2 lt br   gt   lt input type  quot checkbox quot  name  quot test quot  ng-model  quot testModel  item3   quot    gt  Testing 3 lt br   gt   lt input type  quot button quot  ng-click  quot submit   quot  value  quot Submit quot    gt     scope testModel     item1  true

User · Answer

Can Declare As the in ng-init also getting true   lt  doctype html gt   lt html ng-app  plunker   gt     lt head gt       lt meta charset  utf-8  gt       lt title gt AngularJS Plunker lt  title gt       lt script gt document write   lt base href      document location        gt     lt  script gt       lt link rel  stylesheet  href  style css  gt       lt script src  https   ajax googleapis com ajax libs angularjs 1 0 6 angular js  gt  lt  script gt       lt script src  app js  gt  lt  script gt     lt  head gt     lt body ng-controller  MainCtrl  ng-init  testModel  item1    true  gt       lt label gt  lt input type  checkbox  name  test  ng-model  testModel  item1       gt  Testing lt  label gt  lt br   gt       lt label gt  lt input type  checkbox  name  test  ng-model  testModel  item2      gt  Testing 2 lt  label gt  lt br   gt       lt label gt  lt input type  checkbox  name  test  ng-model  testModel  item3      gt  Testing 3 lt  label gt  lt br   gt       lt input type  button  ng-click  submit    value  Submit    gt     lt  body gt   lt  html gt    And You Can Select the First One and Object Also Shown here true false flase

User · Answer

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

User · Answer

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

User · Answer

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   quot Your default value quot     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

[angularjs] AngularJS: ng-model not binding to ng-checked for checkboxes

Examples related to angularjs

Examples related to angularjs-ng-model

Examples related to angularjs-ng-checked