Question

如何使用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);
     }
 });

Answer 1

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

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

控制器

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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回答:)

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

如何获得细胞价值

3 个答案: