How to get checkbox to display checked/unchecked status in AngularJS?

Question

Currently, I have this table with a checkbox at every row in AngularJS;

<table class="table table-hover data-table sort display">
<thead>
  <tr>
    <th>Name</th>
    <th>Location</th>   
    <th>Checkbox Alert</th>
  </tr>
</thead>
<tbody>
  <tr ng-repeat="item in filteredList | orderBy:columnToOrder:reverse">  
    <td>{{item.name}}</td>
    <td>{{item.location}}</td>  
    <td><input type="checkbox" ng-model="selected" ng-change="display(selected, item)"></td>  
  </tr>
</tbody>
</table>

I have a boolean variable {{item.checkbox_status}} which reflects whether the checkbox should be checked or unchecked. How should I place this variable into the table html code above to get the checkbox to reflect the checking status? Or do I need to work on the controller instead?

Still wondering why I got a -ve point? Stupid, trivial question? Not sure since there are so many better programmers on StackOverflow. What is easy for you is hard for me. Please be patient. — guagay_wk
– guagay_wk, Commented Jun 13, 2014 at 1:59

Jentel · Accepted Answer · 2014-06-11 10:32:15Z

3

ng-model is your answer.

i.e:

<input type="checkbox"  ng-model="item.checkbox_status" ng-click="alert_display()" ng-true-value="true" ng-false-value="false" />

Reference: https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D

Hope I helped.

answered Jun 11, 2014 at 10:32

Jentel

1542 silver badges19 bronze badges

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

1 Comment

SUDARSHAN BHALERAO Over a year ago

Should be more proper if wanted to use <input type="checkbox" ng-click="select(item)" ng-model="item.selected" ng-checked="item.selected">

richp · Accepted Answer · 2014-06-11 10:32:17Z

1

just adding ng-model="item.checkbox_status" to the input should do the trick

answered Jun 11, 2014 at 10:32

richp

512 bronze badges

1 Comment

guagay_wk Over a year ago

Correct answer but I can only mark one of them as the correct answer. Sorry.

Asdine · Accepted Answer · 2014-06-11 10:32:37Z

1

Normally, this should be enough :

<input type="checkbox" ng-model="item.checkbox_status" ng-change="display(selected, item)">

answered Jun 11, 2014 at 10:32

Asdine

3,0761 gold badge19 silver badges13 bronze badges

1 Comment

guagay_wk Over a year ago

Correct answer but I can only mark one of them as the correct answer. Sorry.

Bimlendu Kumar · Accepted Answer · 2018-02-16 07:10:53Z

1

use ng-checked for showing checked and unchecked status..
$scope.selectedThings=["a", "b", "c"];
$scope.availableThings=["a", "b", "c", "d", "e"];
<label class="col-md-6 checkbox" ng-repeat="data in availableThings">
<input type="checkbox" ng-checked="data && (availableThings.indexOf(data) !== -1)" />{{data}}
</label>

answered Feb 16, 2018 at 7:10

Bimlendu Kumar

3462 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to get checkbox to display checked/unchecked status in AngularJS?

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related