【问题标题】:Sum pervious values of total with each iteration - Angular JS每次迭代总和的先前值 - Angular JS
【发布时间】:2016-07-02 12:29:03
【问题描述】:

我有一个 Angular JS 控制器,它在范围循环的帮助下对值的数量求和,但现在我需要在每次迭代时对总的先前值求和。我尝试了这么多过滤器,但没有成功。我需要想要的结果。非常感谢您的帮助。

var arr = [
  {
    "unique_id": "CS",
    "college": "BSCS",
    "arr_length": 1,
    "program_section": [
      {
        "question": "Q1",
        "total": 135,
        
      },
      {
        "question": "Q2",
        "total": 142,
        
      },
      {
        "question": "Q3",
        "total": 135,
        
      },
      {
        "question": "Q4",
        "total": 137,
        
      },
      
    ]
  },
  {
    "unique_id": "MBA",
    "college": "BBA",
    "arr_length": 2,
    "program_section": [
      {
        "question": "Q1",
        "total": 175,
        
      },
      {
        "question": "Q2",
        "total": 142,
        
      },
      {
        "question": "Q3",
        "total": 165,
        
      },
      {
        "question": "Q4",
        "total": 137,
        
      },
      
    ]
  },
  {
    "unique_id": "CA",
    "college": "Account",
    "arr_length": 1,
    "program_section": [
      {
        "question": "Q1",
        "total": 145,
        
      },
      {
        "question": "Q2",
        "total": 162,
        
      },
      {
        "question": "Q3",
        "total": 125,
        
      },
      {
        "question": "Q4",
        "total": 117,
        
      },
      
    ]
  }
];
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $scope.names = arr;
}).filter('range', function() {
  return function(input, total) {
    total = parseInt(total);

    for (var i=0; i<total; i++) {
      input.push(i);
    }

    return input;
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl"> 

<table  border="1">
<thead>
  <tr>
    <td>Question</td>
    <td ng-repeat="x in names">{{ x.college }}</td>
  </tr>
</thead>
<tbody>
      <tr ng-repeat="n in [] | range:4">
        <td>
            {{ names[0].program_section[n].question }}
        </td>
        <td width="100px" ng-repeat="x in names">
           {{ x.program_section[n].total }}
        </td>
      </tr>
</tbody>
  
</table>

</div>

想要的结果

<table width="426" border="1">
  <tr>
    <td width="79">Question</td>
    <td >BSCS</td>
    <td >BBA</td>
    <td >Account</td>
    <td >Total</td>
  </tr>
  <tr>
    <td>Q1</td>
    <td>135</td>
    <td>175</td>
    <td>145</td>
    <td width="50" >455</td>
  </tr>
  <tr>
    <td>Q2</td>
    <td>142</td>
    <td>142</td>
    <td>162</td>
    <td width="50" >446</td>
  </tr>
  <tr>
    <td>Q3</td>
    <td>135</td>
    <td>165</td>
    <td>125</td>
    <td width="50" >425</td>
  </tr>
  <tr>
    <td>Q4</td>
    <td>137</td>
    <td>137</td>
    <td>117</td>
    <td width="50" >391</td>
  </tr>
</table>

【问题讨论】:

    标签: javascript angularjs filter sum html-table


    【解决方案1】:

    您可以只计算控制器中的总数并使用它来生成剩余列:

    $scope.totals = {}
        arr.map(function(obj){
            obj.program_section.map(function(section){
                $scope.totals[section.question] = ($scope.totals[section.question] || 0) + section.total
            })
        })
    

    这里 totals[Qx] 将有 Qx 的总数,我们在视图中使用它:

    var arr = [
      {
        "unique_id": "CS",
        "college": "BSCS",
        "arr_length": 1,
        "program_section": [
          {
            "question": "Q1",
            "total": 135,
            
          },
          {
            "question": "Q2",
            "total": 142,
            
          },
          {
            "question": "Q3",
            "total": 135,
            
          },
          {
            "question": "Q4",
            "total": 137,
            
          },
          
        ]
      },
      {
        "unique_id": "MBA",
        "college": "BBA",
        "arr_length": 2,
        "program_section": [
          {
            "question": "Q1",
            "total": 175,
            
          },
          {
            "question": "Q2",
            "total": 142,
            
          },
          {
            "question": "Q3",
            "total": 165,
            
          },
          {
            "question": "Q4",
            "total": 137,
            
          },
          
        ]
      },
      {
        "unique_id": "CA",
        "college": "Account",
        "arr_length": 1,
        "program_section": [
          {
            "question": "Q1",
            "total": 145,
            
          },
          {
            "question": "Q2",
            "total": 162,
            
          },
          {
            "question": "Q3",
            "total": 125,
            
          },
          {
            "question": "Q4",
            "total": 117,
            
          },
          
        ]
      }
    ];
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope, $http) {
        $scope.names = arr;
        $scope.totals = {}
        arr.map(function(obj){
            obj.program_section.map(function(section){
                $scope.totals[section.question] = ($scope.totals[section.question] || 0) + section.total
            })
        })
    }).filter('range', function() {
      return function(input, total) {
        total = parseInt(total);
    
        for (var i=0; i<total; i++) {
          input.push(i);
        }
    
        return input;
      };
    });
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <div ng-app="myApp" ng-controller="customersCtrl"> 
    
    <table  border="1">
    <thead>
      <tr>
        <td>Question</td>
        <td ng-repeat="x in names">{{ x.college }}</td>
        <td>Totals</td>
      </tr>
    </thead>
    <tbody>
          <tr ng-repeat="n in [] | range:4">
            <td>
                {{ names[0].program_section[n].question }}
            </td>
            <td width="100px" ng-repeat="x in names" >
               {{ x.program_section[n].total }}
            </td>
            <td width="50%" ng-bind="totals[names[0].program_section[n].question]"></td>
          </tr>
          
    </tbody>
      
    </table>
    
    </div>

    【讨论】:

    • 谢谢你拯救了我的一天!
    • @QueryMaster 没问题,注意如果更改arr中的数据,就得重新计算总数
    猜你喜欢
    • 2018-09-18
    • 2022-01-20
    • 1970-01-01
    • 2018-12-01
    • 2019-07-23
    • 1970-01-01
    • 1970-01-01
    • 2016-06-30
    • 2017-03-20
    相关资源
    最近更新 更多