gpt4 book ai didi

javascript - 如何在单击按钮 Angularjs 时获取表行值

转载 作者:行者123 更新时间:2023-11-30 11:40:44 24 4
gpt4 key购买 nike

我想知道如何在下面的 plunkr 中获取所选行的表行值。使用表中的复选框选择一行并单击更新按钮时,我需要行 ID、行名称、行值。这是 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%">&nbsp;&nbsp;<input type='checkbox'/>&nbsp;&nbsp; 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%">
&nbsp;&nbsp;<input type='checkbox' />&nbsp;&nbsp;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>

最佳答案

你有很多选择来获取每一行的值,这里是使用 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%">&nbsp;&nbsp;<input type='checkbox'/>&nbsp;&nbsp; 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%">
&nbsp;&nbsp;<input type='checkbox' ng-model="dummyModel[item.id]" ng-change="selectItem(item)"/>&nbsp;&nbsp;{{ 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>

关于javascript - 如何在单击按钮 Angularjs 时获取表行值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42777955/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com