ввод данных завода в контроллер angular.js

Question

Я начинающий в угловом и не знаю, как позвонить factory в controller. Пожалуйста, проверьте мой код ниже. Я не знаю, что это правильный путь или нет. пожалуйста, руководство

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

Приведенный выше код дает следующее EROR в консоли

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 1

Есть две вещи, которые вам не хватает, вы никогда не суммируя ваш метод с вашего завода, и вы не рассматриваете предметы, которые были возвращены фабрикой в ​​методе вашего контроллера.

Фабрика:

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 
     }]; 
    } 
    }  
}); 

Контроллер:

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

Здесь рабочий Plunker

Answer 2

Используйте этот

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; 
    } 
}]);