CODEWITHSUNDEEP
htmlangularjs
Sean Shydow
Sean Shydow

Reputation: 69

Why does angularjs not render locally as a correct document? Please try localhost

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

Answers (2)

Rabi
Rabi

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

James Bruckner
James Bruckner

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

Related Questions