Senthil Senthil - 3 months ago 21
HTML Question

Issue with ngRepeat in Angularjs

repeat to display the table in UI. The value for the table is fetched from Access DB and it is through servlet. My angular controller is able to call the servlet properly and servlet is able to return the json. However ng-repeat is throwing an error .

Error: [ngRepeat:iexp] Expected expression in form of 'item in collection[ track by id]' but got 'item'.

code below :

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>QuoteDetails</title>
<link href="css/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

</head>
<body>
<div class="container" ng-app="myApp">
<div ng-controller="MyController" ng-init="getDataFromServer()">
<table class="table table-striped table-bordered" id="example" style="border-collapse: collapse, width: 100%">
<thead>
<tr>
<th>Quote No</th>
<th>Quote Amt</th>
<th>Quote Contact</th>
<th colspan=2>Action</th>
</tr>
</thead>
<tbody>
<!-- <c:forEach var="user" items="${users}">
<tr>
<td><c:out value="${user.quoteNo}" /></td>
<td><c:out value="${user.quoteAmt}" /></td>
<td><c:out value="${user.quoteContact}" /></td>
</tr>
</c:forEach> -->
<tr ng-repeat=item in user track by $index>
<td>{{item.quoteNo}}</td>
<td>{{item.quoteAmt}}</td>
<td>{{item.quoteContact}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<p><a href="UserController?action=insert">Add User</a></p>
<script src="js/angular.js"></script>
<script>
var app = angular.module('myApp', []);

app.controller("MyController", ['$scope', '$http', function($scope, $http) {
$scope.test="hellos";
console.log($scope.test);
$scope.getDataFromServer = function() {
$http({
method : 'GET',
url : 'UserController'
}).success(function(data, status, headers, config) {
$scope.user= data;
console.log($scope.user);
}).error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});

};
}]);
</script>
</body>
</html>


Could you please let me know what is the issue ?

Answer

ng-repeat value have to be inside quotes!

<tr ng-repeat="item in user track by $index">
Comments