AngularJS ng-repeat doesn't work [closed]

StackOverflow https://stackoverflow.com/questions/21357568

  •  02-10-2022
  •  | 
  •  

Question

I am new to AngularJS and in a learning stage. I am trying to use ng-repeat,have the controller in a separate js file. When i run ,nothing displays. Its is just blank

index.html:

<html data-ng-app="">
    <head>
        <script src="/Scripts/angular.js"></script>
        <script src="/controllers/controller.js"></script>
    </head>
    <body data-ng-contoller='CartController'>
        <div data-ng-repeat="item in Items">
            <span>{{item.Name}}</span>
            <span>{{item.Buyer}}</span>
            <input type="text" data-ng-model="item.Quantity" />
            <span>{{item.Price}}</span>
            <span>Total Price</span>{{item.Quantity * item.Price | currency}}
            <button data-ng-click="remove($index)">Remove</button>
        </div>
    </body>
</html>

controller.js:

function CartController($scope) {
$scope.Items=
   [{ Name: "Books", Quantity:12,Price : 20, Buyer: "Wei-Meng Lee" },
    { Name: "Pencils", Quantity: 17, Price : 35, Buyer: "Scott Allen" },
    { Name: "Markers", Quantity: 2, Price: 30, Buyer: "Adam Fazio" }];

$scope.remove = function(index) {
    $scope.Items.splice(index, 1);
};

$scope.$apply();

}

Was it helpful?

Solution

It is typo data-ng-contoller instead of data-ng-controller. The correct will be:

<body data-ng-controller='CartController'>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top