guagay_wk
guagay_wk

Reputation: 28030

How to have checkbox function access table data in Angularjs

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.

Upvotes: 0

Views: 320

Answers (1)

anvarik
anvarik

Reputation: 6487

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/

Upvotes: 1

Related Questions