Question

我正在关注Brad Green最新的Angular JS出版物的教程中，并且无法正确显示购物车页面。在代码中我有什么需要改变的，我必须解决这个问题吗？

enter image description here

购物-cart.html

<html ng-app='myApp'>
<head>
        <title>Your Shopping Cart</title>
</head>
<body ng-controller='CartController'>
        <h1>Your Order</h1>
        <div ng-repeat='item in items'>
                <span>{{item.title}}</span>
                <input ng-model='item.quantity'>
                <span>{{item.price | currency}}</span>
                <span>{{item.price * item.quantity | currency}}</span>
                <button ng-click="remove($index)">Remove</button>
        </div>
        <script src="angular.js"></script>
        <script src="cartcontroller.js"></script>
</body>
</html>

cartcontroller.js

function CartController($scope) {
        $scope.items = [
                {title: 'Paint pots', quantity: 8, price: 3.95},
                {title: 'Polka dots', quantity: 17, price: 12.95},
                {title: 'Pebbles', quantity: 5, price: 6.95}
        ];

        $scope.remove = function(index) {
                $scope.items.splice(index, 1);
        }
}

提前致谢！

Answer 1

将它放在controller.js文件的顶部：

var app = angular.module('myApp', []);

这是一个有效的演示：http://plnkr.co/edit/ZW0iyP636DXoIac3yLdl?p=preview

该行将定义您的应用，并且您将包含任何其他依赖项，如angular ui或angular bootstrap，以便它们可供您的应用使用。这是另一个示例，其中包含另一个模块作为依赖关系，在这种情况下是谷歌地图模块：

var app = angular.module('plunker', ["google-maps"]);  // http://plnkr.co/edit/5mdRdrOLRkW6PuLuH3Cv?p=catalogue

页面无法正常显示

1 个答案: