2

Brad Green の Angular JS に関する最新の出版物のチュートリアルに従っていますが、ショッピング カート ページを正しく表示するのに問題があります。これを修正するためにコードを変更する必要があるものはありますか?

ここに画像の説明を入力

shopping-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>

カートコントローラー.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 ブートストラップなどの他の依存関係を含めて、アプリで利用できるようにします。別のモジュールを依存関係として含む別の例を次に示します。この場合は Google マップ モジュールです。

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