使用 Wcf 服务在 Angular Js 应用程序中添加总计

Question

我是 Angular JS 的新手。我有一个 Wcf Rest 服务来从数据库中获取所有记录并且它正在工作，但我试图在页面底部添加总计，但我不能这样做。 不再显示全部内容，而是显示文本消息。 我正在尝试添加 Clomun 的数量。

这是我的脚本代码..

var app = angular.module("WebClientModule", [])

    .controller('Web_Client_Controller', ["$scope", 'myService', function ($scope, myService) {

        $scope.OperType = 1;
        $scope.Account_Number = "";
        $scope.Account_Holder_Name = "";
        $scope.Amount = "";
        $scope.Sort_Code = "";
        $scope.Transcation_Type = "";
        $scope.Date = "";

        GetAllRecords();
        //To Get All Records  
        function GetAllRecords() {
            var promiseGet = myService.getAllStudent();
            promiseGet.then(function (pl) { $scope.Users = pl.data },
                function (errorPl) {
                    $log.error('Some Error in Getting Records.', errorPl);
                });
        }

        //$scope.getTotal = function () {
        //    var total = 0;
        //    for (var i = 0; i < $scope.cart.Amount.length; i++) {
        //        var product = $scope.cart.Users[i];
        //        total += (user.Amount + user.Amount);
        //    }
        //    return total;
        //}
    }]);



app.service("myService", function ($http) {

    this.getAllStudent = function () {
        return $http.get("http://localhost:52098/HalifaxIISService.svc/GetCreateCurrentAccountDepositList");
    }
})

这是我的 HTML 代码 ..

@{
    Layout = null;
}

<!DOCTYPE html>

<html data-ng-app="WebClientModule">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>TotalDeposit</title>
    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/RegistrationScript/DepositTotal.js"></script>

</head>
<body>
    <table  ng-init="items.total = {}" id="tblContainer" data-ng-controller="Web_Client_Controller">
        <tr>
            <td>
                <table style="border: solid 2px Green; padding: 5px;">
                    <tr style="height: 30px; background-color: skyblue; color: maroon;">
                        <th></th>
                        <th>Account Number</th>
                        <th>Account Holder Name</th>

                        <th>Amount</th>
                        <th>Sort Code</th>
                        <th>Transcation Type</th>
                        <th>Date</th>

                        <th></th>
                        <th></th>
                    </tr>
                    <tbody data-ng-repeat="user in Users">
                        <tr>
                            <td></td>
                            <td><span>{{user.Account_Number}}</span></td>
                            <td><span>{{user.Account_Holder_Name}}</span></td>
                            <td><span>{{user.Amount}}</span></td>

                            <td><span>{{user.Sort_Code}}</span></td>

                            <td><span>{{user.Transcation_Type}}</span></td>
                            <td><span>{{user.Date}}</span></td>

                        </tr>
                    </tbody>
                    <td ng-init="Users.total.amount = items.total.amount + item.amount">{{user.amount}}</td>

                </table>
            </td>
        </tr>

        <tr>
            <td>Total</td>

            <td>{{items.total.amount}}</td>

        </tr>

    </table>
</body>
</html>

这是运行应用程序时的屏幕截图。

Answer 1

创建一个函数来获得总计类似的东西

    $scope.grandTotal= function(){
    return $scope.users.reduce(function(a, b){
    return a + b.amount;
    },0);
    }

然后在 html

<tr>
    <td>Total</td>

    <td>{{grandTotal()}}</td>

</tr>

工作演示

array.reduce 的参考

使用 Wcf 服务在 Angular Js 应用程序中添加总计

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-10-31 03:43:51

使用 Wcf 服务在 Angular Js 应用程序中添加总计

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-10-31 03:43:51

解决方案1
1 已采纳 2017-10-31 03:43:51