inject factory data into controller angular.js

Question

I am a beginner in angular and dont know how to call factory into controller. Please check my code below. I dont know this is a right way or not. please guide

HTML

<div class="cart" ng-controller="cartWatch">
        <table width="100%">
            <tr ng-repeat="pro in item">
                <td>Name : {{pro.title}}</td>
                <td>Quantity : {{pro.quantity}} <input type="text" ng-model="pro.quantity"></input></td>
                <td>Price : {{pro.price | currency : '&#8377'}}</td>
            </tr>
        </table>
        <div class="total">
            total Price : <strong>{{totalPrice()}}</strong> <br>
            Discount : <strong>{{bill.discount}}</strong> <br>
            You Pay : <strong>{{subTotal()}}</strong>
        </div>
    </div>

SCRIPT

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

appProduct.factory('Items', function() {
 var items = {};
 items.query = function() {

 return [
    {title: 'Paint pots', quantity: 8, price: 3.95},
    {title: 'Polka dots', quantity: 17, price: 12.95},
    {title: 'Pebbles', quantity: 5, price: 6.95}
 ];
 };
 return items;
});

appProduct.controller('cartWatch', function($scope, Items){ 

    $scope.bill = {};
    $scope.totalBeforeDiscount = {};




    $scope.totalPrice = function(){
        var total = 0;
        for (var i = 0; i <= $scope.item.length - 1; i++) {
            total +=   $scope.item[i].price * $scope.item[i].quantity;
        }
        return total;
    }
})

Above code gave following eror in console

TypeError: Cannot read property 'length' of undefined
    at $scope.totalPrice (controller.js:105)
    at n.$digest (angular.min.js:142)
    at n.$apply (angular.min.js:145)
    at angular.min.js:21
    at Object.invoke (angular.min.js:41)
    at c (angular.min.js:21)
    at yc (angular.min.js:21)
    at ee (angular.min.js:20)
    at angular.min.js:313

@Sajeetharan please check updated question .. it gave following error in console ------------------------------------------------------ TypeError: Cannot read property 'length' of undefined at $scope.totalPrice (controller.js:105) at n.$digest (angular.min.js:142) at n.$apply (angular.min.js:145) at angular.min.js:21 at Object.invoke (angular.min.js:41) at c (angular.min.js:21) at yc (angular.min.js:21) at ee (angular.min.js:20) at angular.min.js:313 — Kamal
– Kamal, Commented May 28, 2016 at 6:32

Sajeetharan · Accepted Answer · 2016-05-28 06:46:36Z

1

There are two things you are missing, you are never consuming your method from your factory, and you are not considering the items which returned by factory in your controller's method.

Factory:

 appProduct.factory('Items', function() {
   var items = {};
   return {
     query: function() {
       return [{
         title: 'Paint pots',
         quantity: 8,
         price: 3.95
       }, {
         title: 'Polka dots',
         quantity: 17,
         price: 12.95
       }, {
         title: 'Pebbles',
         quantity: 5,
         price: 6.95
       }];
     }
   }    
 });

Controller:

appProduct.controller('cartWatch', function($scope, Items){ 
    $scope.items = Items.query();
    $scope.bill = {};
    $scope.totalBeforeDiscount = {};
    $scope.totalPrice = function(){
        var total = 0;
        for (var i = 0; i <= $scope.items.length - 1; i++) {
            total +=   $scope.items[i].price * $scope.items[i].quantity;
        }
        $scope.totalBeforeDiscount =total;
    }
})

Here is the working Plunker

answered May 28, 2016 at 6:46

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

1 Comment

Kamal Over a year ago

Thanks for help :)

Punit · Accepted Answer · 2016-05-28 08:33:03Z

Use this

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

appProduct.factory('Items', function() {
 var items = {};
 items.query = function() {

 return [
    {title: 'Paint pots', quantity: 8, price: 3.95},
    {title: 'Polka dots', quantity: 17, price: 12.95},
    {title: 'Pebbles', quantity: 5, price: 6.95}
 ];
 };
 return items.query;
});

appProduct.controller('cartWatch', ['$scope', '$Items', function ($scope, Items) {
    $scope.bill = {};
    $scope.totalBeforeDiscount = {};

    $scope.totalPrice = function(){
        var total = 0;
        for (var i = 0; i <= $scope.items.length - 1; i++) {
            total +=   $scope.items[i].price * $scope.item[i].quantity;
        }
        return total;
    }
}]);

Collectives™ on Stack Overflow

inject factory data into controller angular.js

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related