如何在angular.JS中操作模型($scope)中的数组值?

Excuse me I have to ask a stupid 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
        //
    }];

The above is my code in the controller.js

上面是我在controller.js中的代码

I create an array in the model of the MVC framework of AngularJS to store the taxes of estate in the main five cities in *.

我在AngularJS的MVC框架模型中创建了一个数组来存储*五大城市的遗产税。

Then I want to make the last element in the array be the total. How can I modify my code to calculate the sum of the attributes in the objects in the array and store the sum value in the last objects(total) in the $scope?

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

4 个解决方案

#1

Setup a $watchCollection for taxInFiveCity. Whenever taxInFiveCity changes, the $watch listener will recalculate the total and store it on scope.

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

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>

#2

As @MACMAN mentioned in comments, it is probably better to handle totals as a separate $scope property.

正如@MACMAN在评论中提到的，最好将total作为一个单独的$scope属性来处理。

However, I think you probably want to ng-repeat the entire array. So this is how you could do it:

但是，我认为您可能需要对整个数组进行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);

#3

No need to push the total onto the end of the array object. As @MACMAN suggests, you can just calculate the Total Tax using a forEach loop. Just add this to your controller.js:

不需要将总数推到数组对象的末尾。正如@MACMAN建议的那样，您可以使用forEach循环计算总税额。把这个添加到你的控制器。

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

You can then use it in your view as follows:

然后，你可以在你的意见中使用它，如下:

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

Here is a working Fiddle

这是一个工作小提琴

#4

please see here:http://jsbin.com/qawel/1/

请参见: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);

});

#1