Question

我正在围绕Angular，并刷新我的Javascript，以便制作一个小推车应用程序。

我想要做的是显示订单中每一行的总计行数，以及总订单总数。我可以计算出订单总数没有问题，但在执行行总计部分（每行）时遇到一些麻烦。

所以，它应该显示：

Order Total: £45

|------------------------------------------|
| Product | Qty | Price | Discount | Total |
|------------------------------------------|
| iPod    | 1   | 10    | 5        | 5     |
| laptop  | 2   | 20    | 0        | 40    |
|------------------------------------------|

这是我正在努力争取的各个行总数。

这是我的代码：

http://jsfiddle.net/e1ujuq31/3/

<div class="container" ng-app="orderApp">
 <h1>Create a new order</h1>

<div ng-Controller="CartForm">
    <div class="col-md-6">
        <table class="table">
            <tr>
                <td>List Price</td>
                <td>£{{ total() }}</td>
            </tr>
            <tr>
                <td>List Discounts</td>
                <td>£0.00</td>
            </tr>
            <tr>
                <td>One Off Discount</td>
                <td>£0.00</td>
            </tr>
            <tr>
                <td>Total</td>
                <td>£{{ total() }}</td>
            </tr>
        </table>
    </div>
    <div class="col-md-12">
         <h2>Order Lines</h2>

        <div ng-repeat="line in orderHeader.lines">List price:
            <input type="number" ng-model="line.cost" ng-required class="input-mini">Qty:
            <input type="number" ng-model="line.qty" ng-required class="input-mini">Discount:
            <input type="number" ng-model="line.discount" ng-required class="input-mini">Line Total: {{ line.total }} <a href ng-click="removeLine($index)" class="btn btn-small">Remove</a>

        </div> <a href ng-click="addLine()" class="btn btn-small">Add Line</a>

    </div>
</div>

和Javascript：

var orderApp = angular.module('orderApp', []);

orderApp.controller('CartForm', function ($scope) {

$scope.orderHeader = {
    list_total: 0,
    list_discount: 0,
    oo_discount: 0,
    total: 0,
    lines: []
};

$scope.addLine = function () {
    $scope.orderHeader.lines.push({
        qty: 1,
        description: '',
        cost: 20,
        discount: 0,
        total: parseFloat(this.cost * this.qty - this.discount)
    });
}


$scope.removeLine = function (index) {
    $scope.orderHeader.lines.splice(index, 1);
},

$scope.total = function () {
    var total = 0;
    angular.forEach($scope.orderHeader.lines, function (line) {
        total += (line.qty * line.cost) - line.discount;
    });
    return total;
}

});

目前，行总数显示NaN / null。有什么想法吗？

Answer 1

结帐this

 $scope.lineTotal = function (line) {
        return (line.qty * line.cost) - line.discount;
    };


  <input type="number" ng-model="line.discount" ng-required class="input-mini">Line Total: {{ lineTotal(line) }} <a href ng-click="removeLine($index)" class="btn btn-small">Remove</a>

Javascript / Angular计算对象的总数

1 个答案: