angularjs視圖不與模型更新

-1

所以我有一個菜單和購物車索引頁。您可以查看項目並將其添加到購物車。所有數據都來自服務器後端，並且該部分似乎工作。問題是，當您向其中添加或刪除項目時，購物車不會更新。您必須手動刷新頁面才能更新視圖。我不知道問題出在哪裏，因此任何提示，將不勝感激後端是Grails的所以有一些具體的GSPangularjs視圖不與模型更新

index.gsp中

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 

    <!-- Load css files --> 
    <link rel="stylesheet" href="${resource(dir: "bower_components/sass-bootstrap/dist/css", file: "bootstrap.css")}"> 
    <script src="${resource(dir: "bower_components/jquery", file: "jquery.min.js")}"></script> 

<title>MM Antik Design</title> 
</head> 
    <body ng-app="mmadApp"> 

    <header></header> 
<!-- Navigation --> 
    <nav class="navbar navbar-inverse" role="navigation"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">MMAD</a> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#salg">Salg</a></li> 
       <li><a href="#galleri">Galleri</a></li> 
       <li><a href="#">Om os</a></li> 
       <li><a href="#">Kontakt</a></li> 
       <li class="dropdown"> 
        <a href="" class="dropdown-toggle" data-toggle="dropdown" id="shoppingCart"><img src="${resource(dir: "images", file: "shopping-cart-32.png")}"></a> 
        <ul class="dropdown-menu"> 
         <li id="sCart"> 
          <div ng-controller="shoppingCartCtrl"> //Will not update unless manual refresh 
           <table> 

            <tr ng-repeat="item in shoppingCart.items"> 
             <td><img class="img-responsive" ng-src="{{item.primaryImage}}" /></td> 
             <td>{{item.name}}</td> 
             <td>{{item.price}}</td> 
            </tr> 

            <tr> 
             <td>Checkout {{shoppingCart.quantity}} items</td> 
             <td></td> 
            </tr> 

           </table> 
          </div> 
          </li> 
        </ul> 
       </li> 
      </ul> 
     </div><!-- /.navbar-collapse --> 
    </nav> 
<!-- End Navigation --> 
<div class="row"> 
     <div class="col-md-12"> 
      <article ng-view=""> 

      </article> 
     </div> 
</div> 


    <footer class="navbar-fixed-bottom"> 
      <div class="row"> 
       <p>&copy; <a href="http://randomthought.eu" target="_blank">Random Thought</a></p> 
      </div> 
    </footer> 


    <script src="${resource(dir: "bower_components/lodash/dist", file: "lodash.min.js")}"></script> 
    <script src="${resource(dir: "bower_components/sass-bootstrap/dist/js", file: "bootstrap.min.js")}"></script> 
    <script src="${resource(dir: "bower_components/angular", file: "angular.min.js")}"></script> 
    <script src="${resource(dir: "bower_components/angular-route", file: "angular-route.min.js")}"></script> 
    <script src="${resource(dir: "bower_components/restangular/dist", file: "restangular.min.js")}"></script> 
    <script src="${resource(dir: "bower_components/angular-bootstrap", file: "ui-bootstrap-tpls.min.js")}"></script> 

    <!-- Misc angular includes --> 
    <script src="${resource(dir: "app/scripts", file: "mmadApp.js")}"></script> 
    <script src="${resource(dir: "app/scripts/controllers", file: "homeCtrl.js")}"></script> 
    <script src="${resource(dir: "app/scripts/controllers", file: "itemCtrls.js")}"></script> 
    <script src="${resource(dir: "app/scripts/controllers", file: "shoppingCartCtrl.js")}"></script> 

    <!-- ui controllers --> 
    <script src="${resource(dir: "app/scripts/controllers/ui", file: "uiCtrl.js")}"></script> 

    </body> 
</html>

shoppingCartCtrl //控制器是經過相當混亂嘗試很多不同的東西

mmadApp.controller('shoppingCartCtrl', function($scope, $http) { 

    $scope.shoppingCart = ""; 
    $scope.shoppingCart.quantity = 0; 

    $http.get('/mmad/shoppingCart/show').success(function(data) { 
     $scope.shoppingCart = data; 
    }); 

    $scope.shoppingCart = { 
     items: [{}] 
    }; 

    $http.post("/mmad/shoppingCart/show").success(function(data) { 
      if(data.items != null) { 

       for (var i = 0, len = data.items.length; i < len; i++) { 
        $http.post("/mmad/item/show/" + data.items[i].id).success(function(newData) { 
         $scope.shoppingCart.items.push(newData); 
         $scope.shoppingCart.quantity ++; 
        }) 
       } 

      } 
    }) 


    $scope.addToBasket = function(id) { 
     $http.post("/mmad/shoppingCart/ajaxAddToBasket?itemId=" + id).success(function(data) { 

     }) 
    } 

});

來源

2014-02-07 user2886853

裏面的addToBasket功能，你需要的數據項目推入$scope.shoppingCart。

喜歡的東西

$scope.addToBasket = function(id) { 
    $http.post("/mmad/shoppingCart/ajaxAddToBasket?itemId=" + id).success(function(data) { 
    // do something to data, put in newData 
    $scope.shoppingCart.items.push(newData); 
    }) 
}

來源

2014-02-07 18:42:10

嗯，我試圖這樣做，但現在它就像它推動了錯誤的數據服務器返回的JSON如下{「類」：「mmad.Item」，「ID」： 1，「圓周」：空，「顏色」：空，「說明」：空，「高度」：NULL，「圖像」：空，「姓名」：「偷」，「價格」：337，「primaryImage」：「http://lorempixel.com/400/200","status":"Inactive","width":null}，也似乎我不能在第一次嘗試購買東西時使用空對象推送，我認爲項目初始化的項目是：[{}];行 – user2886853

'$ http.get'將在它返回時覆蓋'$ scope.shoppingCart'。根據返回的數據，可能不再有「項目」。 '$ http.get'是異步的，所以在變量初始化後它會覆蓋'$ scope.shoppingCart'。 –

angularjs視圖不與模型更新

回答

相關問題