Reputation: 69
This is not working locally written as such. I just see the contents of h1 = "Your Shopping Cart"
If I add any code or brakets to full fill the error, it gives me a syntax error I do not see. I am copying from orielly book "AngularJs."
Please let me know if there are syntax errors.
<html ng-app>
<head>
<title>Your Shopping Cart</title>
</head>
<body ng-controller='CartController'>
<h1>Your Shopping Cart</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="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script>
function CartController($scope) {
$scope.item = [
{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>
The issue I am now having is that ng-repeat fires and shows once then defaults to a commented out line. Please help.
This is the correct syntax:
<html ng-app>
<head>
<title>Your Shopping Cart</title>
</head>
<body ng-controller='CartController'>
<h1>Your Shopping Cart</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="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/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>
Upvotes: 0
Views: 94
Reputation: 2220
Here is your syntax error :
<button ng-click="remove{$index}">Remove</button>
You should instead write :
<button ng-click="remove($index)">Remove</button>
Edit : I'm little late to answer. as James pointed out, $scope.item should be $scope.items.
Upvotes: 1
Reputation: 909
This is a two-part typo problem.
You have $scope.item = [
but are referring to it in the rest of your code as items
. Notice the s
at the end. Changing it to $scope.items = [
will solve the first problem.
You also have ng-click="remove{$index}"
when you should be using ng-click="remove($index)"
. Since remove is a function call parenthesis should be used.
Upvotes: 2