ng-repeat中的分组和求和字段

时间:2016-10-22 19:16:14

标签: angularjs sum grouping

我有一个这样的json,我想计算字段的总和,按标志值分组

$scope.staffs =  [

        {
            "id": 1,
            "name": "Management",
            "Flag": 1
        },
        {
            "id": 2,
            "name": "Revenue Collection/Ledger",
            "Flag": 1
        },
        {
            "id": 3,
            "name": "Office Assistance",
            "Flag": 1
        },
        {
            "id": 4,
            "name": "Operators (Source)",
            "Flag": 2
        },
        {
            "id": 5,
            "name": "Operators (WTP)",
            "Flag": 2
        },
        {
            "id": 6,
            "name": "Operators at Networks",
            "Flag": 2
        }
    ]

我的html就像这样我想要的是当用户将值放到Permanent字段时它应该找到它的Flag值并计算具有该Flag值的Permanent字段的总和,如果Flag值为1则将sum加入 wspStaffTotal.Admin_Perm_Total ,如果标记值为2则将总和加到 wspStaffTotal.Technical_Perm_Total

<div ng-repeat="wspStaffTbl in staffs">
{{ wspStaffTbl.name }}
<input type="text" ng-model="wspStaffTbl.Permanent" ng-change="updatePermanentTotal()">
</div>

<input type="text" ng-model="wspStaffTotal.Admin_Perm_Total">
<input type="text" ng-model="wspStaffTotal.Technical_Perm_Total">

我试过的是

$scope.updatePermanentTotal = function(){
  $scope.wspStaffTotal.Admin_Perm_Total = 0;
  $scope.wspStaffTotal.Technical_Perm_Total = 0;

  angular.forEach($scope.staffs, function(value, key){

    if(!isNaN(parseInt(value.Permanent))){
       if(value.Flag==1){
            $scope.wspStaffTotal.Admin_Perm_Total = $scope.wspStaffTotal.Admin_Perm_Total + parseInt(value.Permanent);
          }
    if(value.Flag==2){
            $scope.wspStaffTotal.Technical_Perm_Total = $scope.wspStaffTotal.Technical_Perm_Total + parseInt(value.Permanent);  
          }
    }
 })
}

但它没有按预期工作。

2 个答案:

答案 0 :(得分:2)

我希望这就是你想要的......

<强> app.js

var myApp = angular.module('test' , []);
myApp.controller('test_ctrl' , function($scope){
    $scope.staffs =  [

        {
            "id": 1,
            "name": "Management",
            "Flag": 1
        },
        {
            "id": 2,
            "name": "Revenue Collection/Ledger",
            "Flag": 1
        },
        {
            "id": 3,
            "name": "Office Assistance",
            "Flag": 1
        },
        {
            "id": 4,
            "name": "Operators (Source)",
            "Flag": 2
        },
        {
            "id": 5,
            "name": "Operators (WTP)",
            "Flag": 2
        },
        {
            "id": 6,
            "name": "Operators at Networks",
            "Flag": 2
        }
    ];

    $scope.updatePermanentTotal = function(){
        $scope.wspStaffTotal = {
            Admin_Perm_Total: 0,
            Technical_Perm_Total :0
        }

        angular.forEach($scope.staffs, function(value, index){

            if(!isNaN(parseInt(value.Permanent))){
                if(value.Flag==1){
                    $scope.wspStaffTotal.Admin_Perm_Total = $scope.wspStaffTotal.Admin_Perm_Total + parseInt(value.Permanent);

                }
                if(value.Flag==2){
                    $scope.wspStaffTotal.Technical_Perm_Total = $scope.wspStaffTotal.Technical_Perm_Total + parseInt(value.Permanent);
                }
            }else{
                console.log("value is NAN");
            }

        });
        alert("result flag1:{" +$scope.wspStaffTotal.Admin_Perm_Total+"} flag2: {" +$scope.wspStaffTotal.Technical_Perm_Total +"}" );
    }
});

<强> HTML

<html ng-app="test">

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script src="app.js"></script>

</head>
<body ng-controller="test_ctrl">
<div ng-repeat="wspStaffTbl in staffs">
    {{ wspStaffTbl.name }}
    <input type="text" ng-model="wspStaffTbl.Permanent" ng-change="updatePermanentTotal()">
</div>

<input type="text" ng-model="wspStaffTotal.Admin_Perm_Total">
<input type="text" ng-model="wspStaffTotal.Technical_Perm_Total">

</body>
</html>

答案 1 :(得分:0)

首先使永久值成为控制器中的数组

$scope.webStaffTbl.Permanent = [];

然后将这些传递给函数的值:

<input type="text" ng-model="wspStaffTbl.Permanent[$index]" ng-change="updatePermanentTotal(wspStaffTbl.Permanent[$index],wspStaffTbl.flag)">

并将带有标志的永久值传递给函数

然后在$ scope函数中执行以下操作:

$scope.updatePermanentTotal = function(permanentValue,flag){


$scope.wspStaffTotal.Admin_Perm_Total = 0;
  $scope.wspStaffTotal.Technical_Perm_Total = 0;

  angular.forEach($scope.staffs, function(value, key){

    if(!isNaN(parseInt(permanentValue))){
       if(flag==1){

            $scope.wspStaffTotal.Admin_Perm_Total = $scope.wspStaffTotal.Admin_Perm_Total + parseInt(permanentValue);
          }
    if(flag==2){

          }
    }
 })
}