AngularJS setting up a factory that iterates through a ng-repeat array

Question

I am working my way through setting up a factory. With help from here I have moved several functions from my OrderFormController to a factory. I have ran into a new problem regarding a function that uses forEach to go through a dynamic ng-repeat array. here is what i have..

code of OrderFormController that holds the function i'm trying to move..

app.controller('OrderFormController', function($scope) {
    $scope.total = function(){

    var total = 0;
    var dtotal = 0;
    var ftotal = 0;

    angular.forEach($scope.items.results, function(s){
        if (s.active){
            dtotal+= s.qty * s.price;
        }
    });
    angular.forEach($scope.options.results, function(s){
        if (s.active){
            ftotal+= s.price;
        }
    });
    total = dtotal + ftotal;

    return total;
    };
});

here is the factory

app.factory('OrderData', function() {
    var OrderFactory = {};

    OrderFactory.total = function(){

    var total = 0;

    angular.forEach(item, function(item){
        if (item.active){
            total+= item.qty * item.price;
        }
    });

    return total;
    };

return OrderFactory;

});

my new controller im trying to use

app.controller('OrderController', function($scope, OrderData) {

    $scope.total = OrderData.total;

});

html snippet

<md-list-item ng-repeat="item in items.results | filter:true" 
              layout="row">
              <span>{{ item.name }}</span>
              <span flex></span>
              <span>{{ item.price | currency}}</span>
              <span ng-repeat="option in options.results | filter:true">{{ option.name }}</span>
</md-list-item>
<md-divider></md-divider>
<md-list-item layout="row">
    <span>Order Total :</span>
    <span flex></span>
    <span>{{ total() | currency}}</span>
</md-list-item>

thanks for taking a look

Chris G · Accepted Answer · 2015-04-28 20:01:26Z

1

Ok the problem was

<span>{{ total(items) | currency}}</span>

needed to be changed to

<span>{{ total(items.results) | currency}}</span>

answered Apr 28, 2015 at 20:01

Chris G

2452 silver badges16 bronze badges

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

Comments

Pankaj Parkar · Accepted Answer · 2015-04-28 20:15:33Z

1

You total method should accept item parameter & from UI you should pass items.results object so that service can iterate that array.

Code

OrderFactory.total = function(items) {
    var total = 0;
    angular.forEach(items, function(item) {
        if (item.active) {
            total += item.qty * item.price;
        }
    });
    return total;
};

Markup

<md-list-item ng-repeat="item in items.results | filter:true" layout="row">
    <span>{{ item.name }}</span>
    <span flex></span>
    <span>{{ item.price | currency}}</span>
    <span ng-repeat="option in options.results | filter:true">{{ option.name }}</span>
</md-list-item>
<md-divider></md-divider>
<md-list-item layout="row">
    <span>Order Total :</span>
    <span flex></span>
    <span>{{ total(items.results) | currency}}</span>
</md-list-item>

edited Apr 28, 2015 at 20:15

answered Apr 28, 2015 at 19:51

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

2 Comments

Pankaj Parkar Over a year ago

@ChrisG there was mistak of item & items..could you try updated answer

Chris G Over a year ago

thanks i have answer below... the data was held in items.results

Collectives™ on Stack Overflow

AngularJS setting up a factory that iterates through a ng-repeat array

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related