Question

对不起，我不得不问一个愚蠢的问题。

 $scope.taxInFiveCity = [{
        id: 1,
        city: 'Taipei',
        tax: 32530459
    }, {
        id: 2,
        city: 'NewTaipei',
        tax: 19232016
    }, {
        id: 3,
        city: 'Taichung',
        tax: 12150909
    }, {
        id: 4,
        city: 'Tainan',
        tax: 8322458
    }, {
        id: 5,
        city: 'Kaoshung',
        tax: 16069937
    }, {
        id: 6,
        city: 'Total',
        //The following  is the main part of my difficulty//
        tax: $scope.taxInFiveCity[0].tax + $scope.taxInFiveCity[1].tax + $scope.taxInFiveCity[2].tax + $scope.taxInFiveCity[3].tax + $scope.taxInFiveCity[4].tax
        //
    }];

以上是controller.js

中的代码

我在AngularJS的MVC框架模型中创建了一个数组，用于存储台湾五大城市的房地产税。

然后我想让数组中的最后一个元素为总数。如何修改我的代码以计算数组中对象中属性的总和，并将总和值存储在objects(total)中的最后$scope？

Answer 1

为taxInFiveCity设置$ watchCollection。每当taxInFiveCity发生变化时，$ watch监听器将重新计算总数并将其存储在范围内。

app.controller('ctrl', function($scope) { 
     $scope.taxInFiveCity = [{...}];

     $scope.$watchCollection('taxInFiveCity', function(array) {
         var total = 0;
         if (array) {
             angular.forEach(array, function(index) {
                 total += array[index].tax;
             });
         }
         $scope.total = total;
     });
});

HTML

<ul>
    <li ng-repeat="item in taxInFiveCity"> {{ item.city }} - {{ item.tax | currency }}</li>
    <li>TOTAL TAX: {{ total | currency}} </li>
 </ul>

Answer 2

正如评论中提到的@MACMAN一样，最好将总计作为单独的$scope属性处理。

但是，我想你可能希望ng-repeat整个数组。所以这就是你可以做的事情：

$scope.taxInFiveCity = [{
        id: 1,
        city: 'Taipei',
        tax: 32530459
    }, {
        id: 2,
        city: 'NewTaipei',
        tax: 19232016
    }, {
        id: 3,
        city: 'Taichung',
        tax: 12150909
    }, {
        id: 4,
        city: 'Tainan',
        tax: 8322458
    }, {
        id: 5,
        city: 'Kaoshung',
        tax: 16069937
    }];

    // do totalling
    var total = getTotal($scope.taxInFiveCity);

    // create total object
    var totalObject = {
        city: 'Total',
        tax: total // <--- use total here
    };

    // add it to the array
    $scope.taxInFiveCity.push(totalObject);

Answer 3

无需将总数推到数组对象的末尾。正如@MACMAN建议的那样，您只需使用forEach循环计算总税额即可。只需将其添加到controller.js：

即可

$scope.total = null;
angular.forEach($scope.taxInFiveCity, function(obj , key){
    $scope.total += obj.tax;
});

然后您可以在视图中使用它，如下所示：

<div>Total: {{ total }}</div>

Here is a working Fiddle

Answer 4

请参见此处：http://jsbin.com/qawel/1/

var app = angular.module('app', []);

app.controller('firstCtrl', function($scope){
 $scope.taxInFiveCity = [{
        id: 1,
        city: 'Taipei',
        tax: 32530459
    }, {
        id: 2,
        city: 'NewTaipei',
        tax: 19232016
    }, {
        id: 3,
        city: 'Taichung',
        tax: 12150909
    }, {
        id: 4,
        city: 'Tainan',
        tax: 8322458
    }, {
        id: 5,
        city: 'Kaoshung',
        tax: 16069937
    }
    ];
  $scope.total = {

    tax:0,
    city:'Total'

  };

  angular.forEach($scope.taxInFiveCity, function(data){

    $scope.total.tax += data.tax;

  });
  $scope.taxInFiveCity.push($scope.total);

});

如何在angular.JS中的模型（$ scope）中操作数组中的值？

4 个答案: