使用角度x可编辑的内联表。我希望有其他列，这些列是基于其他列的计算值。
用户添加一行后，应根据索引将其更新为本地范围数组。但是，我无法看到计算列MRPVATAmount, COSTVATAmount的值。它显示仅绑定到x-editable字段的数据。
如何获取像COSTVATAmount onbeforesave事件这样的计算值，即 $ scope.savePurchaseItem？
<div ng-app="app" ng-controller="Ctrl">
<div class="purchase-order-container">
<form class="form-horizontal" ng-submit="savePurchase()">
<div class="row">
<div class="col-xs-12 col-md-3">
<div class="form-group">
<label for="DiscountPercent" class="col-lg-5 control-label">Disc%</label>
<div class="col-lg-7">
<input name="DiscountPercent" type="number" step="any" min="0" class="form-control" placeholder="" ng-model="purchaseHeader.DiscountPercent">
</div>
</div>
</div>
</div>
<div class="row">
<a href="#" class="btn btn-default">Cancel</a>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
<div class="row" style="overflow:auto">
<div class="purchase-entry-data">
<table class="table table-bordered table-hover table-condensed purchase-entry">
<thead>
<tr>
<th></th>
<th>Batch</th>
<th>Qty</th>
<th>Free</th>
<th>Pack</th>
<th>MRP Abt</th>
<th>MRP</th>
<th>Cost</th>
<th>Free Disc</th>
<th>VAT%</th>
<th>Disc%</th>
<th>Amount</th>
<th>VAT Amt</th>
<th></th>
</tr>
</thead>
<tr ng-repeat="order in purchaseOrders">
<td style="white-space: nowrap">
<!-- form -->
<form editable-form name="rowform" onbeforesave="savePurchaseItem($data, order.Id, rowform)" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == order">
<button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary btn-xs">
<em class="fa fa-save"></em>
</button>
<button type="button" ng-disabled="rowform.$waiting" ng-click="cancelOrder()" class="btn btn-xs btn-default">
<em class="fa fa-times"></em>
</button>
</form>
<div class="buttons" ng-show="!rowform.$visible">
<button class="btn btn-primary" ng-click="rowform.$show()">edit</button>
<button class="btn btn-danger" ng-click="removeProduct($index)">del</button>
</div>
</td>
<td>
<span editable-text="order.BatchNo" e-name="BatchNo" e-form="rowform" e-required>
{{ order.BatchNo || '' }}
</span>
</td>
<td>
<span editable-number="order.Qty" e-style="width:50px" e-min="1" e-step="1" e-name="Qty" e-form="rowform">
{{ order.Qty || 1 }}
</span>
</td>
<td>
<span e-min="0" e-step="1" editable-number="order.FreeQty" e-name="FreeQty" e-style="width:50px" e-form="rowform">
{{ order.FreeQty || 0 }}
</span>
</td>
<td>
<span e-min="1" e-step="1" editable-number="order.Packing" e-name="Packing" e-style="width:50px" e-form="rowform">
{{ order.Packing || 1 }}
</span>
</td>
<td>
<span ng-model="rowform.$data.MRPAbt" style="width:60px" e-name="MRPAbt" e-style="width:60px" e-form="rowform">
{{ calculateMRPAbt(rowform.$data) }}
</span>
</td>
<td>
<span e-step="any" e-min="0" editable-number="order.MRP" e-name="MRP" e-style="width:60px" e-form="rowform">
{{ order.MRP || '' }}
</span>
</td>
<td>
<span e-step="any" e-min="0" editable-number="order.Cost" e-name="Cost" e-style="width:60px" e-form="rowform">
{{ order.Cost || '' }}
</span>
</td>
<td>
<span e-step="any" e-min="0" editable-number="order.FreeDisc" e-name="FreeDisc" e-style="width:40px" e-form="rowform">
{{ order.FreeDisc || '' }}
</span>
</td>
<td>
<span editable-select="order.VAT" e-name="VAT" e-form="rowform" e-ng-options="tm.value as tm.text for tm in taxes" e-style="width:40px">
{{ showSelectedVAT(order) }}
</span>
</td>
<td>
<span e-step="any" e-min="0" editable-number="order.DiscountPercentage" e-name="DiscountPercentage" e-style="width:40px" e-form="rowform">
{{ order.DiscountPercentage || '' }}
</span>
</td>
<td>
<span ng-model="rowform.$data.MRPVATAmount" style="width:60px" e-name="MRPVATAmount" e-style="width:60px" e-form="rowform">
{{ calculateMRPVATAmount(rowform.$data) }}
</span>
</td>
<td>
<span ng-model="rowform.$data.COSTVATAmount" style="width:60px" e-name="COSTVATAmount" e-style="width:60px" e-form="rowform">
{{ calculateCostVATAmount(rowform.$data) }}
</span>
</td>
</tr>
</table>
<button class="btn btn-sm btn-primary" ng-click="addNewProduct()">Add row</button>
</div>
</div>
</div>
</div>
App.JS
var app = angular.module("app", ["ui.bootstrap", "xeditable", "ngMockE2E"]);
app.run(function(editableOptions) {
editableOptions.theme = 'bs3';
});
app.controller('Ctrl', function($scope, $filter, $http) {
$scope.taxes = [{
value: 5.5,
text: '5.5'
}, {
value: 4,
text: '4'
}];
$scope.purchaseOrders = [];
$scope.purchaseId = 0;
$scope.selectedVal = 0;
$scope.purchaseHeader = {};
$scope.productMaster = [];
$scope.inserted = {};
$scope.savePurchase = function() {
$scope.purchaseHeader.PurchaseItems = $scope.purchaseOrders;
}
$scope.savePurchaseItem = function(data, id, rowform, idx) {
//data doesnot have MRPVATAmount, COSTVATAmount property. It has only editable data
}
$scope.checkProductName = function(data, rowform) {
debugger;
}
$scope.setDiscPercentToAll = function(data, tableform) {
for (var i = 0; i < tableform.$editables.length; i++) {
if (tableform.$editables[i].name === 'user.status') {
tableform.$editables[i].scope.$data = data;
}
}
};
//$scope.$watch('purchaseHeader.DiscountPercent', function (newValue, oldValue, scope) {
//});
$scope.addNewProduct = function() {
$scope.inserted = {
isNew: true,
BatchNo: '',
Qty: 1,
FreeQty: 0,
ExpiryDate: '',
Packing: 1,
AssortedQty: 0,
VAT: 4,
DiscountPercentage: $scope.purchaseHeader.DiscountPercent,
MRP: 0,
COSTVATAmount: 0,
MRPVATAmount: 0
};
$scope.purchaseOrders.push($scope.inserted);
};
$scope.addNewProduct();
$scope.removeProduct = function(index) {
//$scope.users.splice(index, 1);
};
$scope.cancelOrder = function() {
for (var i = $scope.purchaseOrders.length; i--;) {
var order = $scope.purchaseOrders[i];
// undelete
if (order.isDeleted) {
delete order.isDeleted;
}
// remove new
if (order.isNew) {
$scope.purchaseOrders.splice(i, 1);
}
}
};
$scope.formatProductNameLabel = function(model) {
return model;
};
$scope.showProductName = function(model) {
return model.ProdId;
};
$scope.getStats = function(q) {
return $scope.states;
};
$scope.showSelectedVAT = function(order) {
var selected = [];
selected = $filter('filter')($scope.taxes, {
Tax: order.VAT
});
return selected.length ? selected[0].value : $scope.taxes[0].value;
};
$scope.calculateMRPVATAmount = function(order) {
var amount = (order.Qty * parseFloat(order.MRP)) * (parseFloat(order.VAT) / 100);
return (isNaN(amount)) ? 0 : amount;
}
$scope.calculateCostVATAmount = function(order) {
var amount = (order.Qty * parseFloat(order.Cost)) * (parseFloat(order.VAT) / 100);
return (isNaN(amount)) ? 0 : amount;
}
$scope.calculateMRPAbt = function(order) {
var mrpVatAmt = $scope.calculateMRPVATAmount(order);
var amount = ((order.Qty * parseFloat(order.MRP)) - mrpVatAmt);
return (isNaN(amount)) ? 0 : amount;
}
});
// --------------- mock $http requests ----------------------
app.run(function($httpBackend) {
$httpBackend.whenGET('/groups').respond([{
id: 1,
label: 'user'
}, {
id: 2,
label: 'customer'
}, {
id: 3,
label: 'vip'
}, {
id: 4,
label: 'admin'
}]);
$httpBackend.whenPOST(/\/saveUser/).respond(function(method, url, data) {
data = angular.fromJson(data);
return [200, {
status: 'ok'
}];
});
});
答案 0 :(得分：2)
你可以这样做：
$scope.calculateCostVATAmount = function(order) {
var amount = (order.Qty * parseFloat(order.Cost)) * (parseFloat(order.VAT) / 100);
order.COSTVATAmount = (isNaN(amount)) ? 0 : amount;
return order.COSTVATAmount;
}
否则，我不知道如何知道COSTVATAmount的价值，因为它没有设置在任何地方。