Question

在表中，我在ng-repeat元素中使用了<tr>。列中的内容是从json文件动态加载的。该表中有一个列ID。结果，表中有许多行具有不同的ID。单击后，我想访问Id列的相应行的内部html。有什么办法吗？

<table>
  <tr>
    <th>Id</th>
    <th>Name</th>
  </tr>
  <tr ng-repeat = "x in tableData">
    <td>{{x.id}}</td>
    <td>{{x.name}}</td>
  </tr>
</table>

这是我的代码。我想在单击每个ID时访问它们的内部HTML。有什么办法吗？

Answer 1

将ng-click事件监听器添加到td并传递td的值

angular.module("Demo", []).controller("DemoController", ['$scope', function($scope) {

  $scope.tableData = [{
      id: 1,
      name: 'name1'
    },
    {
      id: 2,
      name: 'name2'
    },
    {
      id: 3,
      name: 'name3'
    }
  ]
  $scope.getData = function(val) {
    console.log(val)
  }
}])

td {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="Demo" ng-controller="DemoController">

  <table border="1px solid black">
    <tr>
      <th>Id</th>
      <th>Name</th>
    </tr>
    <tr ng-repeat="x in tableData">
      <td ng-click='getData(x.id)'>{{x.id}}</td>
      <td>{{x.name}}</td>
    </tr>
  </table>
</div>

如何访问angularjs中clicked元素的内容

1 个答案: