justaphase
asked on
angularjs interpolate interr
Hello experts,
I have a function to load the items of the Webstore Cart.
And i use the same function to calculate the total amounts. I call the sub-function "$scope.getTotal" in 3 places in the same page. and i get like 22 times this error:
I don't know why i get all those errors!... i mean, the page renders ok and the getTotal function returns the correct values as well as the items when i use ng-repeat.. so why all these errors? How could to this better?
My angular function is this
And this is one of my calls. I call first the getTotal and then the ng-repeat with the items cart:
Thx in advanced :)
I have a function to load the items of the Webstore Cart.
And i use the same function to calculate the total amounts. I call the sub-function "$scope.getTotal" in 3 places in the same page. and i get like 22 times this error:
Error: [$interpolate:interr] http://errors.angularjs.org/1.2.28/$interpolate/interr?p0=%20Cart%20(%7B%7B…%20&p1=TypeError%3A%20Cannot%20read%20property%20'length'%20of%20undefined
at Error (native)
at http://10.1.1.145/digicms/plugins/angular.min.js:6:450
at Object.p (http://10.1.1.145/digicms/plugins/angular.min.js:80:480)
at h.$digest (http://10.1.1.145/digicms/plugins/angular.min.js:110:238)
at h.$apply (http://10.1.1.145/digicms/plugins/angular.min.js:113:362)
at http://10.1.1.145/digicms/plugins/angular.min.js:18:270
at Object.d [as invoke] (http://10.1.1.145/digicms/plugins/angular.min.js:35:36)
at c (http://10.1.1.145/digicms/plugins/angular.min.js:18:178)
at dc (http://10.1.1.145/digicms/plugins/angular.min.js:18:387)
at Wc (http://10.1.1.145/digicms/plugins/angular.min.js:17:415)angular.js:10901 (anonymous function)angular.js:7821 (anonymous function)angular.js:8837 pangular.js:13155 h.$digestangular.js:13624 h.$applyangular.js:1329 (anonymous function)angular.js:4222 dangular.js:1318 cangular.js:1363 dcangular.js:1298 Wcangular.js:20798 (anonymous function)jquery.js:974 firejquery.js:1084 self.fireWithjquery.js:406 jQuery.extend.readyjquery.js:83 DOMContentLoaded
I don't know why i get all those errors!... i mean, the page renders ok and the getTotal function returns the correct values as well as the items when i use ng-repeat.. so why all these errors? How could to this better?
My angular function is this
function sql_basket($scope, $http) {
$scope.loadCart = function () {
var site = "<?php echo BASE_URL; ?>";
var page = "ajax_sql/sql_basket.php?param=" + $scope.param;
$http.get(site + page)
.success(function (response) {
$scope.cartproducts = response;
});
};
// Get the total
$scope.getTotal = function () {
var total = 0;
for (var i = 0; i < $scope.cartproducts.length; i++) {
var cproduct = $scope.cartproducts[i];
total += (cproduct.edebito * cproduct.qtt);
}
return total;
}
//initial load
$scope.loadCart();
}
And this is one of my calls. I call first the getTotal and then the ng-repeat with the items cart:
<div class="nav navbar-nav navbar-right hidden-xs" ng-controller="sql_basket" id="obj_sql_basket">
<div class="dropdown cartMenu "> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-shopping-cart"> </i> <span class="cartRespons"> Carrinho ({{ getTotal() | currency: "€" }}) </span> <b class="caret"> </b> </a>
<div class="dropdown-menu col-lg-4 col-xs-12 col-md-4 ">
<div class="w100 miniCartTable scroll-pane">
<table>
<tbody>
<tr class="miniCartProduct" ng-repeat="cart in cartproducts">
<td style="width:20%" class="miniCartProductThumb"><div> <a href="product-details.html"> <img ng-src="{{cart.function_imagemprincipal}}" alt="img"> </a> </div></td>
<td style="width:40%"><div class="miniCartDescription">
<h4> <a href="product-details.html"> {{cart.design}} </a> </h4>
<span class="size" style="display:none;"> 12 x 1.5 L </span>
<div class="price"> <span> {{cart.edebito | currency: "€"}} </span> </div>
</div></td>
<td style="width:10%" class="miniCartQuantity"><a > X {{cart.qtt | number}} </a></td>
<td style="width:15%" class="miniCartSubtotal"><span> {{cart.qtt * cart.edebito | currency: "€"}} </span></td>
<td style="width:5%" class="delete"><a href ng-click="delProduct(cart.rstamp);"> x </a></td>
</tr>
</tbody>
</table>
Thx in advanced :)
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I didn't realized that the first line of the error was actually an error, lol.
And even if i did, i don't know if would get it...
I initialized the $scope.cartproducts as an empty array like you said and worked perfectly.
Thx mate !
Miguel