2

我正在学习 Brad Green 最新发布的 Angular JS 教程，但在正确显示购物车页面时遇到了问题。有什么我需要更改的代码来解决这个问题吗？

在此处输入图像描述

购物车.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>

购物车控制器.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);
        }
}

提前致谢！

4

1 回答 1

3

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

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

这是一个工作演示： http ://plnkr.co/edit/ZW0iyP636DXoIac3yLdl?p=preview

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

var app = angular.module('plunker', ["google-maps"]);  // http://plnkr.co/edit/5mdRdrOLRkW6PuLuH3Cv?p=catalogue
于 2013-05-24T20:02:14.667 回答