How to get the table row values on click of button Angularjs

Question

I would like to know how to get the table row values for the selected row in the below plunkr. On selecting a row using checkbox in table and click on update button, i need row id, row name, row values. Here is the plunkr - https://plnkr.co/edit/9wWxczEH22aG71RN3B0Q?p=preview

html code:
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <table style="width:100%;overflow: scroll; border: 2px solid #AAA; ">
        <thead style="border-bottom: 1px solid #AAA">
            <tr>

                <th style="width:50%">&nbsp;&nbsp;<input type='checkbox'/>&nbsp;&nbsp; catalog</th>
                <th style="width:25%">currentVersion</th>
                <th style="width:25%">new Version</th>
            </tr>
        </thead>
        <tbody style="color: #007db8;">
            <tr id='1' name='MT' >
                <td style="width:50%"> 
                    &nbsp;&nbsp;<input type='checkbox' />&nbsp;&nbsp;Multiple
                </td>
                <td style="width:25%">1.2</td>
                <td style="width:25%">1.3</td>
            </tr>
        </tbody>
    </table>
    <button style="font-size: 11px;" type="button" class="btn btn-primary" >Update</button>
  </body>

</html>

How assign id to row? may be use ng-click event help you — Hadi
– Hadi, Commented Mar 14, 2017 at 4:53
@shaaa see my answer this might help you .. You can get the element object which can be used to get parent td or tr — Abdullah Al Noman
– Abdullah Al Noman, Commented Mar 14, 2017 at 5:19

Carlos Arauz · Accepted Answer · 2017-03-14 05:29:32Z

You have many alternatives to get the value of each row, here an option using ng-repeat and ng-model

angular.module('test', [])
.controller('test', function ($scope) {
  $scope.itemSelecteds = {};
  $scope.dummyModel = {};
  $scope.items = [{
    id: 1,
    name: 'mit',
    catalog: 'Multiple',
    currentVersion: '1.2',
    newVersion: '1.3',
  }, {
    id: 2,
    name: 'mit',
    catalog: 'Multiple',
    currentVersion: '1.2',
    newVersion: '1.3',
  }, {
    id: 3,
    name: 'mit',
    catalog: 'Multiple',
    currentVersion: '1.2',
    newVersion: '1.3',
  }];
  
  $scope.selectItem = function (item) {
    // If checkbox is checked
    if ($scope.dummyModel[item.id]) {
      $scope.itemSelecteds[item.id] = item;
    } else {
      delete $scope.itemSelecteds[item.id];
    }
  }
  
  $scope.update = function () {
    console.log($scope.itemSelecteds);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="test" ng-controller="test">
    <table style="width:100%;overflow: scroll; border: 2px solid #AAA; ">
        <thead style="border-bottom: 1px solid #AAA">
            <tr>
                
                <th style="width:50%">&nbsp;&nbsp;<input type='checkbox'/>&nbsp;&nbsp; catalog</th>
                <th style="width:25%">currentVersion</th>
                <th style="width:25%">new Version</th>
            </tr>
        </thead>
        <tbody style="color: #007db8;">
            <tr ng-repeat="item in items" ng-attr-id="item.id">
                <td style="width:50%"> 
                    &nbsp;&nbsp;<input type='checkbox' ng-model="dummyModel[item.id]" ng-change="selectItem(item)"/>&nbsp;&nbsp;{{ item.catalog }}
                </td>
                <td style="width:25%">{{ item.currentVersion }}</td>
                <td style="width:25%">{{ item.newVersion }}</td>
            </tr>
        </tbody>
    </table>
    <button style="font-size: 11px;" type="button" class="btn btn-primary" ng-click="update()" >Update</button>
  </body>

Abdullah Al Noman · Accepted Answer · 2017-03-14 05:15:53Z

1

Use the ng-checked event to get on check event but if you want to process both check and unchecked event try ng-click

Here this will give you input element .From which you can use elemnt.parent.parent to get td or tr and their values

function doSomething(element){

  var parent=elemnt.parent.parent;
  // do something

}

answered Mar 14, 2017 at 5:15

Abdullah Al Noman

2,8884 gold badges22 silver badges37 bronze badges

Collectives™ on Stack Overflow

How to get the table row values on click of button Angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related