示例AngularJS无法正常工作

时间:2015-09-12 20:21:58

标签: angularjs

我正在尝试从一本书中学习Angularjs。但是,我在本书中输入了以下代码,但它在Chrome中无效:

    <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="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
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);
}
}
</script>
</body>
</html>

它只显示括号。我不需要解决这个问题,我只是想知道这是旧书还是其他什么。 这对其他人有用吗?

1 个答案:

答案 0 :(得分:1)

您忘记在名为&#39; myApp&#39;的模块中声明您的控制器,因为您的html标记显示<html ng-app='myApp'>

angular.module('myApp', [])
.controller('CartController', function($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);
}
});

Plunkr