计算 angularjs 中的总价格

Question

我是 Angular 的新手。我正在尝试打印账单中产品的总计。在计算产品总数时，qty 的值由用户给出。计算产品总计的代码工作正常，但是当我计算总计时，它只采用默认值 1 而不是用户给定的值。

服务器正在响应代码、名称、价格等产品详细信息，gst.The数量由用户输入。

我搜索过，但到处都是来自服务器响应的数量。

这是我的 billPage 代码：

    <body>
<div class="container" ng-controller="billCtrl">
    <h1>Billing Section</h1>
    <input class="form-control" ng-model="search"><br>
    <button class="btn btn-primary" ng-click="searchProduct(search)">Search Product</button>
    <table class="table">
        <thead>
            <tr>
                <th>Product Code</th>
                <th>Product Name</th>
                <th>Product Price</th>
                <th>GST(%)</th>
                <th>Quantity</th>
                <th>Product Total</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="product in billing" ng-init="model = [{qty:1}]">
                <td>{{product.code}}</td>
                <td>{{product.name}}</td>
                <td>{{product.price}}</td>
                <td>{{product.gst}}</td>
                <td><input type="number" ng-model="model[$index].qty" ng-required class="form-control"></td>
                <td>{{(product.price+(product.gst*product.price/100)) * model[$index].qty }}</td>
            </tr>
            <tr>
                <td colspan="5" style="text-align:right">Gross Total</td>
                <td>{{total()}}</td>
            </tr>
        </tbody>
    </table>
</div>

BillCtrl.js

代码

 var myApp = angular.module('myApp', ["ngRoute"]);

 myApp.controller('billCtrl', ['$scope', '$http', function($scope, $http) {
console.log("Hello World from bill");
$scope.billing = [];
$scope.searchProduct = function(id) {
    console.log("search");
    $http.get('/billing/' + id).success(function(response) {
        $scope.billing.push(response[0]);
    });
}

$scope.total = function() {
    console.log($scope.model[0].qty);
    var total = 0;
    angular.forEach($scope.billing, function(product) {
        total += (product.price + (product.price * product.gst / 100)) * $scope.model.qty;
    })
    console.log(total);
    return total;
}
  }])

Answer 1

您可以在 UI 中拥有合计逻辑，并在控制器中添加合计

这是工作示例

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
  <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script data-require="angular.js@1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
  <script>
    (function() {

      angular.module("testApp", ['ui.bootstrap']).controller('billCtrl', ['$scope', '$http', function($scope, $http) {
        console.log("Hello World from bill");
        $scope.model = undefined;
        $scope.billing = [];
        $scope.searchProduct = function(id) {
            console.log("search");
            /*$http.get('/billing/' + id).success(function(response) {
                $scope.billing.push(response[0]);
            });*/
            
            $scope.billing = [{"code":"a1","name":"a1","price":100,"gst":0.1},{"code":"a2","name":"a2","price":200,"gst":0.2},{"code":"a3","name":"a3","price":300,"gst":0.3},{"code":"a4","name":"a4","price":400,"gst":0.4}];
        }
        
        $scope.total = function() {
            //console.log($scope.model[0].qty);
            var total = 0;
            angular.forEach($scope.billing, function(product, index) {
                total += product.total;
            })
            console.log(total);
            return total;
        }
      }]);


    }());
  </script>
  <style></style>
</head>

<body ng-app="testApp">
  <div class="container" ng-controller="billCtrl">
    <h1>Billing Section</h1>
    <input class="form-control" ng-model="search"><br>
    <button class="btn btn-primary" ng-click="searchProduct(search)">Search Product</button>
    <table class="table">
        <thead>
            <tr>
                <th>Product Code</th>
                <th>Product Name</th>
                <th>Product Price</th>
                <th>GST(%)</th>
                <th>Quantity</th>
                <th>Product Total</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="product in billing" ng-init="model = [{qty:1}];">
                <td>{{product.code}}</td>
                <td>{{product.name}}</td>
                <td>{{product.price}}</td>
                <td>{{product.gst}}</td>
                <td><input type="number" ng-model="model[$index].qty" ng-required class="form-control"
                ng-change="product.total = model[$index].qty?(product.price+(product.gst*product.price/100)) * model[$index].qty:0"
                ng-init="product.total = model[$index].qty?(product.price+(product.gst*product.price/100)) * model[$index].qty:0"></td>
                <td>{{product.total}}</td>
            </tr>
            <tr>
                <td colspan="5" style="text-align:right">Gross Total</td>
                <td>{{total()}}</td>
            </tr>
        </tbody>
    </table>
</div>
</body>

</html>

计算 angularjs 中的总价格

Calculate the total of prices in angularjs

angularjs

angularjs-scope

angularjs-ng-repeat