user91579631 user91579631 - 1 month ago 7
HTML Question

Send row info to angularjs controller when checkbox in row is clicked

I have some html code which uses angularjs to show a table. On this table, there is a checkbox on each row.

The table looks like this;
enter image description here

Here is the html code.





<div ng-app ng-controller="CheckCtrl">
<table class="table table-hover data-table sort display" style="width:100%">
<thead>
<tr>
<th class="Serial_">
Serial
</th>
<th class="Name_">
Name
</th>
<th class="ID_">
ID
</th>
<th class="On_off_">
On/off
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in check_items">
<td>{{item.SERIAL}}</td>
<td>{{item.NAME}}</td>
<td>{{item.ID}}</td>
<td> <input type="checkbox" ng-checked="item.ON_OFF == '1'"></td>
</tbody>
</table>
</div>


Here is my angularjs controller code.

controller('CheckCtrl', ['$scope', '$http', 'configuration',
function ($scope, $http, $configuration) {
var url_api = $configuration.host + "cloe/webroot/cloe-cloud/app/API.json";
$http.get(url_api).success(function(data)
{
$scope.check_items = data;
});


This is what I want. When a user clicks on a checkbox, information regarding all the items on that particular row belonging to the clicked checkbox is sent to a angualrjs controller function for processing. This information should include the Serial, Name, ID and new state of On/Off after clicking on the checkbox.

I am using angularjs v1 and twitter bootstrap.

EDIT: Edited the original question details to indicate that the row information should be sent whenever the checkbox is clicked and not only when the checkbox is enabled.

Answer

We can use ng-change to send row data to controller as object. After that, you can retrieve row data as following:

var serial = row.SERIAL;
var name = row.NAME;
var id = row.ID;
var onOff = row.ON_OFF;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="CheckCtrl">
    <table class="table table-hover data-table sort display" style="width:100%">
        <thead>
        <tr>
            <th class="Serial_">
                Serial
            </th>
            <th class="Name_">
                Name
            </th>
            <th class="ID_">
                ID
            </th>
            <th class="On_off_">
                On/off
            </th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="item in check_items">
            <td>{{item.SERIAL}}</td>
            <td>{{item.NAME}}</td>
            <td>{{item.ID}}</td>
            <td> <input type="checkbox" ng-checked="item.ON_OFF == '1'" ng-click="rowSelected(item)"></td>
        </tbody>
    </table>
</div>

<script>
  var app = angular.module('app',[]);
  app.controller('CheckCtrl', ['$scope', '$http', function ($scope, $http) {
      $scope.check_items = 
        [
           {
             SERIAL:'Test Serial',
             NAME:'Test Name',
             ID : 10,
             ON_OFF : '1'
           }
        ];

      $scope.rowSelected = function(row)
      {
          console.log(row);
      };
   }]);
  </script>