如何获取单元格值答案

【问题标题】：How to get cell value如何获取单元格值
【发布时间】：2017-11-25 05:41:12
【问题描述】：

如何使用 ng-click 指令从 HTML 表格中获取单元格值？
我需要实现使用 ng-click 捕获行值的最佳方法

HTML 表格：

<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>

我的控制器：

 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);
     }
 });

【问题讨论】：

标签： html angularjs function html-table each

【解决方案1】：

将对象作为参数传递给函数并访问它

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

控制器

$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>

【讨论】：

【解决方案2】：

使用$index 将索引传递给该方法

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

从控制器获取

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

你也可以从@sachila 的回答中得到它:)

【讨论】：

在应用filter到ng-repeat的情况下它不会起作用。
@SlavaUtesinov 。它应该工作。如果您应用了过滤器，那么您将使用$parent.$index 和$child.$index。现在这一次是另一种解决 OP 问题的方法

【解决方案3】：

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>

【讨论】：