Question

我有一小段sample here我自己试图以角度方式获取总值，

<div id="app" ng-app="myApp" ng-controller="myCtrl" ng-init="total = 0">
  <ul>
      <li  ng-repeat="x in myarr" >  {{x.val}} 
     <span ng-if="$last">, Total - {{total = total+x.val}}</span>
      </li>
  </ul>
</div>

但总数不正确。如何实现？

编辑：我自己试图在最后一个元素旁边的ng-repeat循环中获得总数。在this question中有一个已接受的答案，下面的答案也在同一个逻辑中起作用。但是在那个方法中，函数getTotal()会调用myarr.length次，每次数组在控制器中循环对吗？因此，根据问题中的示例，数组将完全循环6次（myarr.length +一次ng-repeat，即5 + 1）。我错了吗？

Answer 1

尝试在角度控制器本身进行所有计算并将其存储在变量中。但是如果你担心数组中的值不断变化，你也可以在控制器中使用calcTotal函数。另外，ng-repeat应该在li上，而不是ul。

<div id="app" ng-app="myApp" ng-controller="myCtrl" ng-init="total = 0">
  <ul >
      <li ng-repeat="x in myarr">  {{x.val}} 
     <span ng-if="$last">, Total - {{getTotal()}} or {{totalValue}}</span>
      </li>
  </ul>
</div>

您的控制器就像

angular.module('myApp', []).controller('myCtrl', function($scope) {
 $scope.myarr = [{id: 1, val: 500},{id: 2,val: 300},{id: 3,val: 200},{id: 4,val: 600},{id: 5,val: 100}];
 //first approach
 $scope.totalValue = 0;
 for(i=0;i<$scope.myarr.length;i++){
 if($scope.myarr[i] && $scope.myarr[i].val)
    $scope.totalValue+=$scope.myarr[i].val;
 }

 //OR

 //second approach
 $scope.getTotal = function(){
 var total = 0;
 for(i=0;i<$scope.myarr.length;i++){
 if($scope.myarr[i] && $scope.myarr[i].val)
    total+=$scope.myarr[i].val;
 }
 return total;
 }
});

如果使用变量方法，则每次数组值更改时都必须显式计算 $ scope.getTotal 。通过函数方法它会发生，但UI上的绑定函数并不昂贵，因为它们会在每个摘要周期中重新计算。

Answer 2

您可以使用angular.forEach循环并计算总数。

angular.module('myApp', []).controller('myCtrl', function($scope) {
  $scope.total = 0;
 $scope.myarr = [{id: 1, val: 500},{id: 2,val: 300},{id: 3,val: 200},{id: 4,val: 600},{id: 5,val: 100}];
  angular.forEach($scope.myarr, function(value){$scope.total+=value.val});
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="app" ng-app="myApp" ng-controller="myCtrl">
  <ul >
      <li ng-repeat="x in myarr" >  {{x.val}} 
      <span ng-if="$last">{{total}}</span>
      </li>
  </ul>
</div>

Answer 3

使用ng-init

中的ng-repeat，尝试此方法，控制器中未使用任何功能

angular.module('myApp', []).controller('myCtrl', function($scope) {

$scope.myarr = [{id: 1, val: 500},{id: 2,val: 300},{id: 3,val: 200},{id: 4,val: 600},{id: 5,val: 100}];

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="app" ng-app="myApp" ng-controller="myCtrl" ng-init="total=0">
  <ul >
      <li ng-repeat="x in myarr" ng-init="$parent.total = $parent.total + (x.val)"> {{x.val}} 
      <span ng-if="$last">{{total}}</span>
      </li>
  </ul>
</div>

另一种方法，

使用array.reduce添加数组Link

的总和

angular.module('myApp', []).controller('myCtrl', function($scope) {

$scope.myarr = [{id: 1, val: 500},{id: 2,val: 300},{id: 3,val: 200},{id: 4,val: 600},{id: 5,val: 100}];
$scope.addTotal = function(){
var sum = $scope.myarr.reduce($scope.add);
return sum.val;
}
$scope.add = function(a,b){
 return {val:a.val + b.val};
}
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="app" ng-app="myApp" ng-controller="myCtrl" ng-init="total=0">
  <ul >
      <li ng-repeat="x in myarr" >  {{x.val}} 
      <span ng-if="$last">{{addTotal()}}</span>
      </li>
  </ul>
</div>

使用角度方式的列表中的值的总和

3 个答案: