如何从选中的表行中取值？
如何从选中的表行中取值？
提问于 2017-10-13 21:05:47
当用户使用复选框选项选中行并单击“计算折旧”时，我想获取{{asset.purchaseValue}}、{{asset.residualValue}}、{{asset.purchaseDate}}和{{asset.ddate}}中的值以执行计算并发送回给用户。如何在jQuery、AngularJS或vanilla Javascript中获取这些值？
<table align="center" class="assetlist">
<thead>
<tr>
<th width="45px">
<select ng-model="sortBy" class="localSearch">
<option value="title">Title</option>
<option value="ddate">Disposal Date</option>
<option value="date">Purchase Date</option>
<option value="residualValue">Residual Value</option>
<option value="purchaseValue">Purchase Value</option>
</select>
</th>
<th class="thead" ng-hide="hide"><input type="text" class="localSearch" placeholder="Title" ng-model="searchString.title" /></th>
<th class="thead" ng-hide="hide"><input type="text" class="localSearch" placeholder="Purchase Date" ng-model="searchString.date" /></th>
<th class="thead" ng-hide="hide"><input type="text" class="localSearch" placeholder="Purchase Value" ng-model="searchString.purchaseValue" /></th>
<th class="thead" ng-hide="hide"><input type="text" class="localSearch" placeholder="Disposal Date" ng-model="searchString.ddate" /></th>
<th class="thead" ng-hide="hide"><input type="text" class="localSearch" placeholder="Residual Value" ng-model="searchString.residualValue" /></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="asset in assets | orderBy:sortBy | filter:searchString : searchStrict | limitTo: rowLimit">
<td><input type="checkbox" ng-model="checked"/></td>
<td>{{asset.title}}</td>
<td>{{asset.date | date: "MMMM d, y"}}</td>
<td>{{asset.purchaseValue | currency:"£"}}</td>
<td>{{asset.ddate | date: "MMMM d, y"}}</td>
<td>{{asset.residualValue | currency:"£"}}</td>
</tr>
</tbody>
</table>
<button class="formbtn" ng-disabled="!checked">Calculate Depreciation</button>Stack Overflow用户
发布于 2017-10-13 21:27:42
由于有多个资产，您应该在<td>中单击as ng-model="asset.selected"复选框时将资产的新selected属性绑定为true(或切换
<tr ng-repeat="asset in assets | orderBy:sortBy | filter:searchString : searchStrict | limitTo: rowLimit">
<td><input type="checkbox" ng-model="asset.selected" /></td>
<td>{{asset.title}}</td>
<td>{{asset.date | date: "MMMM d, y"}}</td>
<td>{{asset.purchaseValue | currency:"£"}}</td>
<td>{{asset.ddate | date: "MMMM d, y"}}</td>
<td>{{asset.residualValue | currency:"£"}}</td>
</tr>
<button class="formbtn" ng-click="calculateDep()">Calculate Depreciation</button>在控制器中，
//For Calculation
$scope.calculateDep = function() {
angular.forEach($scope.assets, function(asset) {
if (asset.selected) {
//Here are asset.purchaseValue,asset.residualValue ...
//perform calculation individually for an asset
//or send the enitire selected assets for calculation by creating a new scope array for selected ones
}
})
}更新：
请看下面的代码片段，当您选中一个或多个复选框并计算dep时，您可以在控制台中看到整个对象。
angular.module("app", []).controller("ctrl", function($scope) {
$scope.assets = [{
title: 'Asset1',
date: '',
purchaseValue: 500,
ddate: '',
residualValue: 100
}, {
title: 'Asset2',
date: '',
purchaseValue: 500,
ddate: '',
residualValue: 100
}];
//For Calculation
$scope.calculateDep = function() {
console.clear();
angular.forEach($scope.assets, function(asset) {
if (asset.selected) {
console.log(asset);
}
})
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="app" ng-controller="ctrl">
<table>
<tr ng-repeat="asset in assets track by $index">
<td><input type="checkbox" ng-model="asset.selected" /></td>
<td>{{asset.title}}</td>
<td>{{asset.date}}</td>
<td>{{asset.purchaseValue}}</td>
<td>{{asset.ddate}}</td>
<td>{{asset.residualValue}}</td>
</tr>
</table>
<button class="formbtn" ng-click="calculateDep()">Calculate Depreciation</button>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46730683
复制相关文章
相似问题
腾讯云开发者
