CODEWITHSUNDEEP
htmlangularjscheckbox
anand
anand

Reputation: 1751

How to get the value of checkbox which has been checked

I have a list of checkbox in my html page. Now when a user clicks on the checkbox and when he presses Donwload button i should be able to know what all checkbox has been clicked with checked state.

 <tr st-select-mode="multiple" st-select-row="row"
            ng-repeat="row in orders">
 <td>{{ row.orderid }}<td>
 <td><input type="checkbox" name="{{ row.orderid }}"></td>
 </tr>
 <button type="button" class = "btn btn-default" ng-click="download()">Download Order</button>

hence when i click on the Download order button i need to pass the values of orderid against which checkbox state is checked.

So how this can be done. I am not getting the idea how to proceed.

Upvotes: 0

Views: 112

Answers (1)

Gerdinand
Gerdinand

Reputation: 136

You should use a ng-model with your checkbox, for example:

<input type="checkbox" ng-model="checkboxModel">

The value will change when it is selected or deselected and will be true or false, respectively.

This value can be accessed by calling $scope.checkboxModel

If you want to loop through all checkboxes, the most useful would be to add them to an array. This can be done by using ng-init:

<td ng-init="yourArray.push(row.orderid)"></td>

If you paste this in your tr (in your ng-repeat), it will execute this everytime it adds an order. Then if someone clicks on the download button, you can just loop through this array to see if it is checked or not. (You would still need to use ng-model instead of name).

A yet even better solution would be 

<input type="checkbox" ng-model="checkbox[row.orderid]"></input>

This way every checkbox will land in the $scope.checkbox array, which you can just loop through with a for each and get all the true and false results. With this solution you won't even need the ng-init!

Upvotes: 1

Related Questions