How to manipulate the value in array in model($scope) in angular.JS?

Question

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

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 Taiwan.

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?

why not do it in view where the sum is calculated using a loop? — MACMAN
– MACMAN, Commented Jul 22, 2014 at 9:39
Thanks a lot!!! I use the JS's for loop to handle the problem. At the first time I just want to know are there any other methods to solve in Angular. — VerityMissed
– VerityMissed, Commented Jul 24, 2014 at 11:17

Michael Kang · Accepted Answer · 2014-07-22 10:02:18Z

2

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

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>

answered Jul 22, 2014 at 10:02

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Davin Tryon · Accepted Answer · 2014-07-22 10:00:52Z

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

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

$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);

Ed B · Accepted Answer · 2014-07-22 09:59:37Z

0

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:

$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

answered Jul 22, 2014 at 9:59

Ed B

8591 gold badge7 silver badges25 bronze badges

Comments

sylwester · Accepted Answer · 2014-07-22 10:02:00Z

0

please see here: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);

});

answered Jul 22, 2014 at 10:02

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

Collectives™ on Stack Overflow

How to manipulate the value in array in model($scope) in angular.JS?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related