Question

所以我有一个带有菜单和购物车的索引页面。您可以查看商品并将其添加到购物车。所有数据都来自服务器后端，该部分似乎有效。问题是当您从中添加或删除项目时，购物车不会更新。您必须手动刷新页面才能更新视图。我不知道问题出在哪里，所以任何提示都会受到赞赏后端是grails，所以有一些gsp细节

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 ) {

        })
    }

});

Answer 1

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

angularjs视图不用模型更新

1 个答案: