Twitter Bootstrap Question posted in

Send row info to angularjs controller when checkbox in row is clicked – Twitter bootstrap

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.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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

    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search