Angular unable to make checkbox checked

Question

Hi I am developing angularjs application. I have list of checkbox's displayed. I have below code.

 <div class="checkbox" id="checkboxes" style="display:block"   *ngFor="let rolename of roles; let i = index">
           <input type="checkbox"
           name="roles.rolename"
           value="rolename.roleid"
           [(ngModel)]="rolename.ischecked"/>
           {{rolename.rolename}}
           {{rolename.ischecked}}
  </div>

Whenever there is ischecked true then i want to make checkbox checked. So i set ischecked property to model itself. Currently this is not happening.

Below is sample data i applied.

[
   {
      "roleid":"666c01aa-5272-40bc-a888-5edac9087aad",
      "ischecked":"false",
      "rolename":"Observer",
      "tenantid":"3a8360d6-9491-4191-a1ea-3260b70c3cd2",
      "isactive":true,
      "isdeleted":false,
      "scopeids":null,
      "scopes":null
   },
   {
      "roleid":"4df4bf2f-16b0-482a-84c1-7a646bbfcf71",
      "ischecked":"true",
      "rolename":"Operator",
      "tenantid":"3a8360d6-9491-4191-a1ea-3260b70c3cd2",
      "isactive":true,
      "isdeleted":false,
      "scopeids":null,
      "scopes":null
   },
   {
      "roleid":"be2cc996-e3a6-4736-ad19-b794ff04581e",
      "ischecked":"false",
      "rolename":"Supervisor",
      "tenantid":"3a8360d6-9491-4191-a1ea-3260b70c3cd2",
      "isactive":true,
      "isdeleted":false,
      "scopeids":null,
      "scopes":null
   },
   {
      "roleid":"6c0f9539-a7fb-4050-92a3-bc80975e1c7d",
      "ischecked":"false",
      "rolename":"ConfigureAdmin",
      "tenantid":"3a8360d6-9491-4191-a1ea-3260b70c3cd2",
      "isactive":true,
      "isdeleted":false,
      "scopeids":null,
      "scopes":null
   },
   {
      "roleid":"46476a49-f315-4a56-ba90-e4ed6a24d0d5",
      "rolename":"Engineer",
      "tenantid":"3a8360d6-9491-4191-a1ea-3260b70c3cd2",
      "isactive":true,
      "isdeleted":false,
      "scopeids":null,
      "scopes":null
   },
   {
      "roleid":"77c5f7e6-5f80-47c5-a3f5-f4dba4af41d1",
      "ischecked":"false",
      "rolename":"SecurityAdmin",
      "tenantid":"3a8360d6-9491-4191-a1ea-3260b70c3cd2",
      "isactive":true,
      "isdeleted":false,
      "scopeids":null,
      "scopes":null
   }
]

Can someone help me to make this works? Any help would be appreciated. Thank you

Thanks but my scenario is different. I have property ischecked that will give us true/false. — Giridhar Joshi
– Giridhar Joshi, Commented Jan 12, 2018 at 10:30
It's the same thing, example also returns true/false. Just set [checked]="rolename.ischecked" — misterti
– misterti, Commented Jan 12, 2018 at 10:42
ok thanks. i will try it out. but what property has to set for model? — Giridhar Joshi
– Giridhar Joshi, Commented Jan 12, 2018 at 10:46
I use ionic with <ion-checkbox /> and there, the ngModel works — misterti
– misterti, Commented Jan 12, 2018 at 10:48

misterti · Accepted Answer · 2018-01-12 14:35:28Z

2

To have checkbox checked and have a two-way binding in Angular 2+

<input type="checkbox" name="roles.rolename" value="rolename.roleid" [checked]="rolename.ischecked" (change)="rolename.ischecked = !rolename.ischecked" />

Also read this post for further options: Angular 2 Checkbox Two Way Data Binding

answered Jan 12, 2018 at 14:35

misterti

6356 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Giridhar Joshi Over a year ago

This worked like charm. I am trying to fix it from last two days. I spent almost 2 days to this. Thank you Misterti.

misterti Over a year ago

I suggest you start using Ionic Framework, if you are making a mobile app. It runs on Angular platform, but it has a much more simplified structure and comes with lots of pre-made user interface components. And you can also mix code with standard html components

Collectives™ on Stack Overflow

Angular unable to make checkbox checked

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related