AngularJS - Check checkboxes dynamically

Question

I am new to AngularJS. I am working on checkboxlist using WebApi and angularJS and need help. Well, there is a checkboxlist where user can select multiple options. I am able to write successful code for this. The selected options are saved into the database. But, on edit, I want those options selected already. How can I achieve this? Thanks.

Here is my checkboxlist:

<div ng-repeat="value in getCheckboxlist">
    <input ichecklist type="checkbox" id="{{value.Id}}" value="{{value.Id}}">
    <span>{{value.Name}}</span>
</div>

Declaration of array:

$scope.selection: [];

and this is how I am getting selected IDs from database on edit:

$scope.selection: selectedValues;

where 'selectedValues' contains json of selected IDs.

Where your ng-models for these checkboxes? you should do this with ng-checked. — Elvin Mammadov
– Elvin Mammadov, Commented Aug 2, 2016 at 11:44
I am not using ng-models. Instead, I am triggering ng-click like, ng-click="toggleSelection(value.Id)". This function gets the selected values Ids for me and I save them in db. — Barkha
– Barkha, Commented Aug 2, 2016 at 11:57
Ok, you can retrive data from database same way. and add it to value. I will update my answer — Elvin Mammadov
– Elvin Mammadov, Commented Aug 2, 2016 at 12:11

Weedoze · Accepted Answer · 2016-08-02 11:48:48Z

2

Your are looking for the ngChecked directive from AngularJS

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

Use it like this

<input id="checkSlave" type="checkbox" ng-checked="expression">

You can replace expression by a call to a function that will verify if this checkbox should be checked or not. The function should return true or false

answered Aug 2, 2016 at 11:48

Weedoze

14k2 gold badges38 silver badges65 bronze badges

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

1 Comment

Weedoze Over a year ago

Could your mark it as the answer for the future viewer then please

Elvin Mammadov · Accepted Answer · 2016-08-02 11:48:05Z

1

By using ng-checked you can write it as follow

//Angular Controller codes
$scope.Checkboxlist = [{id:1, value:  true, Name: "A"}, {id:2, value: false, Name: "B"}];

//View codes
<div ng-repeat="value in Checkboxlist">
    <input ichecklist type="checkbox" id="{{value.Id}}" ng-checked="Checkboxlist[$index].value">
   <span>{{value.Name}}</span>
</div>

answered Aug 2, 2016 at 11:48

Elvin Mammadov

27.6k13 gold badges45 silver badges84 bronze badges

1 Comment

Barkha Over a year ago

Thanks for the answer, but I had to change the controller in order to get values in json that I didn't want to. So, I used function call in ng-checked, which worked :) Thanks once again :)

Collectives™ on Stack Overflow

AngularJS - Check checkboxes dynamically

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related