javascript - 在 ng-grid 中添加带有计算字段的新行

Question

我在 ng-grid 中添加带有计算字段的新行时遇到问题。

HTML 代码..

<div class="costsheetGrid" ng-controller="costsheetGridController">
        <p>
            <a class="btn btn-lg btn-primary" ng-click="addAnotherRow()" href="javascript:void(0);">Add Another Row</a>
        </p>
        <div class="gridStyle" ng-grid="gridOptions">
        </div>
    </div> 

Javascript代码..

$scope.gridData = [
            {
                'Consumption': '100',
                'ConversionQuantity': '3',
            }
        ];

angular.forEach($scope.gridData, function (row) {
                row.getActualConsumption = function () {
                    return row.Consumption / row.ConversionQuantity;
                };
            });

$scope.gridOptions = {
            data: 'gridData',
            enableCellSelection: true,
            enableRowSelection: false,
            enableCellEditOnFocus: true,
            columnDefs: [

            { field: "Consumption", displayName: "Consumption", width: 100 },

            { field: "ConversionQuantity", displayName: "Conversion Quantity", width: 120 },
            { field: "getActualConsumption()", displayName: "Actual Consumption", width: 120, enableCellEdit: false }
        ]
        };

$scope.addAnotherRow = function () {
            $scope.gridData.push({
                'Consumption': '',
                'ConversionQuantity': '',
            });
        };

当我更改网格第一行中的消耗或转换数量并计算实际消耗时，此代码完美运行。当我单击“添加另一行”按钮时，它会添加一个新行，但是当我在第二行中插入消耗或转换数量时，它无法计算实际消耗。

那么，我怎样才能实现这一目标呢？

Answer 1

您只需为初始数据的每一行附加 getActualConclusion 函数。创建新行时，您还应该添加该函数。

$scope.addAnotherRow = function () {
            $scope.gridData.push({
                'Consumption': '',
                'ConversionQuantity': '',
                 getActualConsumption: function () {
                    return this.Consumption / this.ConversionQuantity;
                }
            });
        };

请注意，我刚刚复制了您的 getActualConclusion 实现 - 您可能应该进行某种验证，以确保您不会因潜水而出现错误零并确保两个值都是实际数字