通过单击angularjs中的td而不使用jquery来获取tr索引

时间:2016-09-18 15:23:31

标签: angularjs

我有一个表,当我点击<td>时,我需要返回这个td名称和行索引。但是,如果我像ng-click="showIndex(field.name, $index)"那样使它返回td的索引,而不是tr(我知道这是合乎逻辑的:))。我找到了一些方法来检查父索引,但它是jquery,也许有一种方法来检查角度? I have some example

1 个答案:

答案 0 :(得分:1)

您应该在

中使用$parent.$index代替$index
<tr ng-repeat='row in table.row'>
    <td ng-click="showIndex(field.name, $parent.$index)" ng-repeat='field in row.fields'>{{field.name}}</td>
</tr>

&#13;
&#13;
var app = angular.module('App', []);

app.controller('Ctrl', function($scope) {
  $scope.table = {
row: [{
  fields: [{
    title: "Your name",
    name: "John",
    id: 'name'
  }, {
    title: "Your second name",
    name: "Doe",
    id: 'secondName'
  }, {
    title: "Your age",
    name: 26,
    id: 'age'
  }, {
    title: "Your sex",
    name: "Male",
    id: 'sex'
  }]
}, {
  fields: [{
    title: "Your name",
    name: "Kevin",
    id: 'name'
  }, {
    title: "Your second name",
    name: "Parker",
    id: 'secondName'
  }, {
    title: "Your age",
    name: 32,
    id: 'age'
  }, {
    title: "Your sex",
    name: "Male",
    id: 'sex'
  }]
}, {
  fields: [{
    title: "Your name",
    name: "Barbara",
    id: 'name'
  }, {
    title: "Your second name",
    name: "Streisand",
    id: 'secondName'
  }, {
    title: "Your age",
    name: 60,
    id: 'age'
  }, {
    title: "Your sex",
    name: "Female",
    id: 'sex'
  }]
}, {
  fields: [{
    title: "Your name",
    name: "Linda",
    id: 'name'
  }, {
    title: "Your second name",
    name: "Lorry",
    id: 'secondName'
  }, {
    title: "Your age",
    name: 20,
    id: 'age'
  }, {
    title: "Your sex",
    name: "Female",
    id: 'sex'
  }]
}]
  };

  $scope.showIndex = function(name, index) {
$scope.showResult = name + ' in the row number ' + index;
  }
});
&#13;
<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <script src='script.js'></script>
</head>
<body ng-controller="Ctrl">

	<table>
		<thead>
			<tr>
				<th ng-repeat='header in table.row[0].fields'>{{header.title}}</th>
			</tr>
		</thead>

		<tbody>
			<tr ng-repeat='row in table.row'>
				<td ng-click="showIndex(field.name, $parent.$index)" ng-repeat='field in row.fields'>{{field.name}}</td>
			</tr>
		</tbody>
	</table>

  <br>
  <b>{{showResult}}</b>
	</body>
</html>
&#13;
&#13;
&#13;