Kamal Kamal - 6 months ago 29
AngularJS Question

inject factory data into controller angular.js

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

Answer

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