How to have checkbox function access table data in Angularjs

Question

I have a table in Angularjs that has a checkbox in each row. When the checkbox is clicked, I would like an alert function to be launched to display the content of the row being clicked. The problem I face is how can the alert function access the data content of the row?

The table in html looks like this;

<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-click="alert_display()"> </td>
  </tr>
</tbody>
</table>

The controller code looks like this;

$scope.alert_display = function()
{
    alert("Testing");
};

I would like alert_display() to display the contents of {{item.name}} and {{item.location}} of the relevant row.

anvarik · Accepted Answer · 2014-06-10 10:46:36Z

1

Do the following:

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

your JS code:

$scope.display = function(selected, item) {

    if(selected)
         alert(item.name + ' ' + item.location);
    else
         // do sth else

}

Here is the fiddle: http://jsfiddle.net/HB7LU/4156/

edited Jun 10, 2014 at 10:46

answered Jun 10, 2014 at 10:38

anvarik

6,5075 gold badges41 silver badges53 bronze badges

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

3 Comments

guagay_wk Over a year ago

Thanks. It works partially. Upvoted but it is not exactly the answer I want. For some reason, I have to check, then uncheck the checkbox in order to launch the display function. How can I get the display function to launch everytime I click the checkbox, regardless of whether I am checking or unchecking it?

anvarik Over a year ago

check the fiddle, now it alerts whenever you click | unclick

guagay_wk Over a year ago

You are the man! That's the answer I want! I have marked your answer as the right one. Thanks!!

Collectives™ on Stack Overflow

How to have checkbox function access table data in Angularjs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related