html - 如何从angularjs中的表中获取选定的行
问题描述
我想从表中获取选定行的值。这是我到目前为止所尝试的以及附加的 plunkr。https://plnkr.co/edit/QDPh4q0hQdlW09orayyL?p=preview
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' +
document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x"src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr ng-click="getData()">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
解决方案
最好迭代每个person
viang-repeat
并将它们显式传递给您的函数,而不是在 HTML 中硬编码并使用 DOM:
$scope.people = [{
name: 'Jill',
lastName: 'Smith',
age: 50
},
....
]
$scope.getData = function(person) {
console.log('Selected person is ' + person.name);
}
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr ng-repeat='person in people' ng-click="getData(person)">
<td>{{person.name}}</td>
<td>{{person.lastName}}</td>
<td>{{person.age}}</td>
</tr>
</table>
推荐阅读
- c# - 尝试对 LINQ 查询应用多个独立过滤器
- html - 怎么做
互不影响 - python - Python 可以使用同名的 getLogger 意外覆盖记录器吗?
- group-by - 更新到 MySQL 5.7 后的 GROUP BY 日期错误
- python - 创建子列表时填充
- bash - 使用命令行参数跳过 shell 脚本中的函数
- unity3d - 您上传的 APK 或 Android App Bundle 使用尚未生效的证书签名
- java - Connect4 如何使用鼠标在操作中区分行和列
- microsoft-teams - 无法在 Microsoft Team 中更改外出状态
- ios - 在objective-c中调用的Swift协议不起作用