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

Question

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;

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.

Natiq · Accepted Answer · 2016-11-08 10:06:16Z

1

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>

edited Nov 8, 2016 at 10:06

answered Nov 8, 2016 at 8:23

Natiq

4168 silver badges16 bronze badges

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

6 Comments

guagay_wk Over a year ago

Natiq, thanks for the answer. Upvoted. It is almost what I want. I was not clear in my question details. I still have a minor problem. I would like to row information to be sent whenever the checkbox is clicked. Your code sends row information when the checkbox is enabled but when the checkbox is disabled, nothing is sent. I will edit my question details to be more clear.

Natiq Over a year ago

@user91579631, I have used condition(if(row.selected)). If you want to retrieve data in both of selected and unselected state, you can remove condition. I will update my answer.

guagay_wk Over a year ago

Your code works perfectly well. When I transferred to my code, the first click does not work. However, subsequent clicks work fine. I am still struggling with that. I cannot see what is the difference at the moment. Thanks a lot for your help.

guagay_wk Over a year ago

May I ask why do you use ng-model="item.selected"?

Natiq Over a year ago

@user91579631, I have used it to determine checkbox state, selected(true) or not(false) . But, after update, it is not required

|

GraveyardQueen · Accepted Answer · 2016-11-08 08:21:30Z

1

You can maybe use something like this,

HTML:

<input type="checkbox" ng-checked="item.ON_OFF == '1'" ng-change="checkSubmit(item.serial,item.name,item.id,item.on_off)">

JS:

function checkSubmit(serial,name,id,on_off){

... /*Processing can happen now with the parameters obtained*/ ...}

NOTE: The case of the variables may be wrong

answered Nov 8, 2016 at 8:21

GraveyardQueen

7691 gold badge7 silver badges17 bronze badges

Comments

guagay_wk · Accepted Answer · 2016-11-08 10:01:21Z

1

Some modification to the answer provided by Natiq.

Modify this line

<td> <input type="checkbox" ng-checked="item.ON_OFF == '1'" ng-model="item.selected" ng-change="rowSelected(item)"></td>

to

<td> <input type="checkbox" ng-checked="item.ON_OFF == '1'" ng-model="item.selected" ng-click="rowSelected(item)"></td>

The modification is from ng-change to ng-click. This will solve your problem where the first click does not work but only subsequent clicks work based on the comments posted. Using ng-click ensures that every click will be detected.

answered Nov 8, 2016 at 10:01

guagay_wk

28.3k64 gold badges202 silver badges311 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related