如何在单击Angularjs按钮时获取表行值
[英]How to get the table row values on click of button Angularjs
问题描述
I would like to know how to get the table row values for the selected row in the below plunkr. 
我想知道如何在下面的plunkr中获取所选行的表行值。 On selecting a row using checkbox in table and click on update button, i need row id, row name, row values. 在使用表格中的复选框选择行并单击更新按钮时，我需要行ID，行名称，行值。 Here is the plunkr - https://plnkr.co/edit/9wWxczEH22aG71RN3B0Q?p=preview 这是plunkr - https://plnkr.co/edit/9wWxczEH22aG71RN3B0Q?p=preview
html code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<table style="width:100%;overflow: scroll; border: 2px solid #AAA; ">
<thead style="border-bottom: 1px solid #AAA">
<tr>
<th style="width:50%"> <input type='checkbox'/> catalog</th>
<th style="width:25%">currentVersion</th>
<th style="width:25%">new Version</th>
</tr>
</thead>
<tbody style="color: #007db8;">
<tr id='1' name='MT' >
<td style="width:50%">
<input type='checkbox' /> Multiple
</td>
<td style="width:25%">1.2</td>
<td style="width:25%">1.3</td>
</tr>
</tbody>
</table>
<button style="font-size: 11px;" type="button" class="btn btn-primary" >Update</button>
</body>
</html>
2 个解决方案
解决方案1
2 已采纳 2017-03-14 05:29:32
You have many alternatives to get the value of each row, here an option using ng-repeat and ng-model 你有很多选择来获得每一行的价值，这里有一个使用ng-repeat和ng-model的选项
angular.module('test', []) .controller('test', function ($scope) { $scope.itemSelecteds = {}; $scope.dummyModel = {}; $scope.items = [{ id: 1, name: 'mit', catalog: 'Multiple', currentVersion: '1.2', newVersion: '1.3', }, { id: 2, name: 'mit', catalog: 'Multiple', currentVersion: '1.2', newVersion: '1.3', }, { id: 3, name: 'mit', catalog: 'Multiple', currentVersion: '1.2', newVersion: '1.3', }]; $scope.selectItem = function (item) { // If checkbox is checked if ($scope.dummyModel[item.id]) { $scope.itemSelecteds[item.id] = item; } else { delete $scope.itemSelecteds[item.id]; } } $scope.update = function () { console.log($scope.itemSelecteds); } });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="test" ng-controller="test"> <table style="width:100%;overflow: scroll; border: 2px solid #AAA; "> <thead style="border-bottom: 1px solid #AAA"> <tr> <th style="width:50%"> <input type='checkbox'/> catalog</th> <th style="width:25%">currentVersion</th> <th style="width:25%">new Version</th> </tr> </thead> <tbody style="color: #007db8;"> <tr ng-repeat="item in items" ng-attr-id="item.id"> <td style="width:50%"> <input type='checkbox' ng-model="dummyModel[item.id]" ng-change="selectItem(item)"/> {{ item.catalog }} </td> <td style="width:25%">{{ item.currentVersion }}</td> <td style="width:25%">{{ item.newVersion }}</td> </tr> </tbody> </table> <button style="font-size: 11px;" type="button" class="btn btn-primary" ng-click="update()" >Update</button> </body>
解决方案2
1 2017-03-14 05:15:53
Use the ng-checked event to get on check event but if you want to process both check and unchecked event try ng-click 使用ng-checked事件来启动检查事件，但如果要同时处理check和unchecked事件，请尝试ng-click
Here this will give you input element .From which you can use elemnt.parent.parent to get td or tr and their values 这里将为您提供输入元素。您可以使用elemnt.parent.parent来获取td或tr及其值
function doSomething(element){
var parent=elemnt.parent.parent;
// do something
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.