CODEWITHSUNDEEP
htmlangularjsfunctionhtml-tableeach
Alonso Contreras
Alonso Contreras

Reputation: 675

How to get cell value

How to get a cell value from HTML table using ng-click directive?
I need to implement the best way to capture the values of a row using ng-click

Html table: 

<div ng-controller="myController">      
    <table>
        <thead>
            <th>Id</th>
            <th>Name</th>
            <th>Age</th>
            <th>Action</th>
        </thead>
        <tbody>
             <tr ng-repeat="item in stutents">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td><button type="button" ng-click="getCellValue()">View</button></td>
            </tr>
        </tbody>
    </table>

</div>

My controller:

 var app = angular.module('firstApp', []);

 app.controller('myController', function($scope){
     $scope.stutends = {};
     //array values... etc


     $scope.getCellValue = function() {

         //i want values index, ej. table[0] = id, table[1] = name etc... its posible ?, ej
         //var name = table[1]
         console.log(name);
     }
 });

Upvotes: 0

Views: 258

Answers (3)

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41445

Pass the object as a parameter to the function and access it 

<td><button type="button" ng-click="getCellValue(item)">View</button></td>

Controller 

$scope.getCellValue = function(item) {
   console.log(item.name);
   console.log(item.id);
}


var app = angular.module('firstApp', []);

app.controller('myController', function($scope) {
  $scope.students = [{
    name: 'dat',
    id: '00',
    age: 12
  }];
  //array values... etc

  $scope.getCellValue = function(item) {
    console.log(item.name);
    console.log(item.id);
  }



});
<!DOCTYPE html>
<html ng-app="firstApp">

<head>
  <meta charset="utf-8" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="myController">

  <table>
    <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Age</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in students">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
        <td><button type="button" ng-click="getCellValue(item)">{{item.id}}</button></td>
      </tr>
    </tbody>
  </table>


</body>

</html>

Upvotes: 3

thanveer pu
thanveer pu

Reputation: 191

var app = angular.module('firstApp', []);

app.controller('myController', function($scope) {
  $scope.students = [{
    name: 'A',
    id: '1',
    age: 12
  },{
    name: 'B',
    id: '2',
    age: 10
  },
  {
    name: 'C',
    id: '3',
    age: 22
  }];
  //array values... etc

  $scope.getCellValue = function(index) {
    console.log($scope.students[index].id);
 
  }



});
<!DOCTYPE html>
<html ng-app="firstApp">

<head>
  <meta charset="utf-8" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="myController">

  <table>
    <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Age</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in students">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
        <td><button type="button" ng-click="getCellValue($index)">{{item.id}}</button></td>
      </tr>
    </tbody>
  </table>


</body>

</html>

Upvotes: 1

Ramesh Rajendran
Ramesh Rajendran

Reputation: 38713

pass the index to that method by using $index 

<td><button type="button" ng-click="getCellValue($index)">View</button></td>

getting from controller

$scope.getCellValue = function(index) {
   console.log($scope.stutents[index].name);
   console.log($scope.stutents[index].id);
}

And also you can get it from @sachila answer :)

Upvotes: 1

Related Questions