Reputation: 825
I started learning AngularJS, but I am stuck on a problem. The ng-repeat
is not looping through the users from the array. The list is just empty.
Here's my code.
app.js
var app = angular.module('myapp', []);
app.controller('dataCtrl', function ($scope) {
$scope.users = [
{ name: 'Max', age: 20 },
{ name: 'Tom', age: 42 },
{ name: 'Alex', age: 41 },
{ name: 'Thomas', age: 3 },
{ name: 'Andreas', age: 17 },
{ name: 'Richard', age: 11 }
]
});
index.html
<!DOCTYPE html>
<html ng-app="myapp" lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<title>Angular JS</title>
</head>
<body>
<div class="container">
<h1>Die Familie</h1>
<table class="table" ng-controller="dataCtrl">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="users in user">
<td>{{user.name}}</td>
<td>{{user.age}}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Upvotes: 1
Views: 59
Reputation: 829
You have a typo ... it should be user in users... see plunker
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td>{{user.age}}</td>
</tr>
As a follow-up to the other comment, one recommend way is to use 'var vm=this' instead of $scope in your controller and 'controller as syntax' in your HTML. I updated the plunker. Your HTML would look like:
<body ng-controller="MainCtrl as vm">
<p>Hello {{vm.name}}!</p>
<div class="container">
<h1>Die Familie</h1>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in vm.users">
<td>{{user.name}}</td>
<td>{{user.age}}</td>
</tr>
</tbody>
</table>
</div>
</body>
Note that users become vm.users.
And your app:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function() {
var vm = this;
vm.name = 'World';
vm.users = [
{ name: 'Max', age: 20 },
{ name: 'Tom', age: 42 },
{ name: 'Alex', age: 41 },
{ name: 'Thomas', age: 3 },
{ name: 'Andreas', age: 17 },
{ name: 'Richard', age: 11 }
];
});
Using both of those techniques avoid a lot of $scope issues as your code grow... especially with callbacks, functions, etc. where you end up with $scope meaning different things and it is a pain to debug. Here is an article giving more info: "AngularJS's Controller As and the vm Variable" from John Papa and his Angular style guide is good to read too.
Upvotes: 1
Reputation: 13837
Yes, the other answers above are why. May I suggest since you are learning you look into the "controller as" functionality and get rid of $scope. Anytime you learn something they show you the wrong way first.
Upvotes: 1
Reputation: 104805
Your ngRepeat
syntax is bass-ackwards - it's obj in collection
not collection in obj
ng-repeat="user in users">
Upvotes: 3