0
votes

Im building a cart in angular JS. It works like this user clicks on item function addToCart adds it to database

then on te page i have a cart wich displays cart contents. So in addToCart method i update cart.. and want to show the data.

The strange thing is that the $scope.cart shows all the objects in console... so all works fine... but on the view page the {{cart}} var shows only [] and it will not get updated... normaly every var updates automaticly but for some reason this one will not:

controller (stripped down)

  c2App.controller('MakeOrderController', function($scope, $rootScope, $http, $location, $routeParams, ShareData, ngDialog) {
    //there are more cvars here ... but those are not important
    $scope.cart = [];

    $scope.addToCart = function() {
        $http({
          url: "http://localhost/c2api/addtocart",
          method: 'POST',
          data: 
          {
            'sessionid' : $rootScope.sessionid,
            'menuId' : $scope.menuid,
            'catId' : $scope.catid,
            'resId' : $scope.resid,
            'singleCat' : $scope.singleCat, 
            'multiCat' : $scope.multiCat, 
            'singleMenu' : $scope.singleMenu, 
            'multiMenu' : $scope.multiMenu,
            'qty' : $scope.qty
          },
          headers : {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}
        }).success(function(data){

        //update the cart
        $scope.getCart($rootScope.sessionid,$scope.resid);

        }).error(function(err){"ERR", console.log(err)});
    };

    $scope.getCart = function (ses,resid) {
      if (!angular.isUndefined(ses) && !angular.isUndefined(resid)) {
        $http({
          url: "http://localhost/c2api/getcart",
          method: 'GET',
          params: {resId: resid, ses: ses},
          headers : {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}
        }).success(function(data){

          //SET CART DATA
          $scope.cart = data;

          console.log($scope.cart);// <--- THIS SHOWS ALL DATA!

        }).error(function(err){"ERR", console.log(err)});
      } else {
        console.log('error.....');
      }
    }
  });

and on the view:

<div id="collapseCart" class="slideable">
  <div class="panel-body" style="background:#f8f8f8">
    {{cart}}
  </div>

when i put some var in the $scope.cart on load... it does show this on the view.. so for some reason it will not update

//UPDATE when i use $rootScope.cart = data and show {{$root.cart}} ... the data does show.....

3
did you add ng-app and ng-controller directive on your html?Md. Al-Amin
yes.. please take note that if i change the content of $scope.cart var it will show on the view page.... that wont work if controler and app were not declaredReza

3 Answers

0
votes

The problem is that {{cart}} on the view is in a separate scope. Check out scope inheritance to understand this phenomenon. To keep the view's scope from muddling with the controller's scope, either use the controller as syntax (preferred) or define $scope.cart further in on your controller.

i.e. use $scope.order.cart in the controller and {{order.cart}} on the view.

0
votes

Try to reload the DOM after pushing data.

$scope.cart.push(data);
$route.reload();
0
votes

Odd indeed, have you tried $apply? $apply forces an update.

scope.$apply(function (){
    $scope.cart = data;
});

In the larger view:

    }).success(function(data){

      //SET CART DATA
      $scope.cart = data;

      console.log($scope.cart);// <--- THIS SHOWS ALL DATA!

      $scope.$apply(function (){
          $scope.cart = data;
      });

    }).error(function(err){"ERR", console.log(err)});