Question

我是AngularJS的新手，我是从O'Reilly的书中学到的。下面是一个简单的购物车代码，在本书中作为示例给出。我尝试运行它，但它无法正常工作，我无法找出原因，对此有任何帮助表示赞赏，帮助我继续进行研究。谢谢。

<!DOCTYPE html>
<html ng-app ="myApp">
<head>
<title>Shoppin Cart</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body ng-controller = 'CartController'>
    <h1>Your Order</h1>
    <div ng-repeat = 'item in items'>
    <span>{{ item.title }}</span>
        <input ng-model = 'item.qauntity'>
        <span>{{ item.price | currency }}</span>
        <span> {{ item.price * item.quantity | currency }}</span>
        <button ng-click = "remove($index)">Remove</button>
    </div>
    <script>
    function CartController ($scope) {
        $scope.items = [
            {title: 'Paint Pots', quantity: 25, price: 15},
            {title: 'Polka dots', quantity: 12, price: 0.25},
            {title: 'Pebbles', quantity: 18, price: 1.75}
        ];
        $scope.remove = function(index) {
            $scope.items.splice(index,1);
        }
    }

    </script>

</body>
</html>

这是JSfiddle链接

http://jsfiddle.net/53nkmc7o/

Answer 1

问题在于 myApp ，您在HTML中使用但未在脚本中使用。在脚本中定义它或删除它。

这个工作正常。

    <!doctype html>
<html ng-app>
  <head>
    <title>My Angular App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
  </head>
  <body ng-controller = 'CartController'>
    <h1>Your Order</h1>
    <div ng-repeat = 'item in items'>
    <span>{{ item.title }}</span>
        <input ng-model = 'item.qauntity'>
        <span>{{ item.price | currency }}</span>
        <span> {{ item.price * item.quantity | currency }}</span>
        <button ng-click = "remove($index)">Remove</button>
    </div>
    <script>
    function CartController ($scope) {
        $scope.items = [
            {title: 'Paint Pots', quantity: 25, price: 15},
            {title: 'Polka dots', quantity: 12, price: 0.25},
            {title: 'Pebbles', quantity: 18, price: 1.75}
        ];
        $scope.remove = function(index) {
            $scope.items.splice(index,1);
        }
    }

    </script>

</body>
</html>

小提琴：http://jsfiddle.net/kumareloaded/L0ff39pb/

Answer 2

您在html中指定模块myApp并不存在于您的脚本中，因此请在其中定义并定义控制器，因为您的html说CartController位于MyApp模块

下面的工作演示

＆＃13;

        angular.module('myApp',[]).controller('CartController',function ($scope) {
            $scope.items = [
                {title: 'Paint Pots', quantity: 25, price: 15},
                {title: 'Polka dots', quantity: 12, price: 0.25},
                {title: 'Pebbles', quantity: 18, price: 1.75}
            ];
            $scope.remove = function(index) {
                $scope.items.splice(index,1);
            }
        });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-controller = 'CartController' ng-app="myApp">
        <h1>Your Order</h1>
        <div ng-repeat = 'item in items'>
        <span>{{ item.title }}</span>
            <input ng-model = 'item.qauntity'>
            <span>{{ item.price | currency }}</span>
            <span> {{ item.price * item.quantity | currency }}</span>
            <button ng-click = "remove($index)">Remove</button>
        </div>

＆＃13;

Answer 3

<!DOCTYPE html>
<html ng-app ="myApp">
<head>
<title>Shoppin Cart</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
</head>
<body ng-controller = 'CartController'>
<h1>Your Order</h1>
<div ng-repeat = 'item in items'>
<span>{{ item.title }}</span>
<input ng-model = 'item.qauntity'>
<span>{{ item.price | currency }}</span>
<span> {{ item.price * item.quantity | currency }}</span>
<button ng-click = "remove($index)">Remove</button>
</div>
<script>
//create angular module name called myApp   
var myApp = angular.module('myApp', []);
//create controller
myApp.controller('CartController', function ($scope) {

        $scope.items = [
            {title: 'Paint Pots', quantity: 25, price: 15},
            {title: 'Polka dots', quantity: 12, price: 0.25},
            {title: 'Pebbles', quantity: 18, price: 1.75}
        ];
        $scope.remove = function(index) {
            $scope.items.splice(index,1);
        }
    })

    </script>

</body>
</html>

你会试试这个。你不能在你的代码上创建任何 myApp 角度模块

数据绑定在AngularJS中不起作用

3 个答案: