user2494584 user2494584 - 4 months ago 18
HTML Question

AngularJS seems to be working but ng-repeat is not

I'm stumped and can't find the bug.

Angular is working, because it's reading my {{expressions}}, however, it's not replacing them with the content I'm expecting. It's simply removing them and blanks sit in their place.
I'm sure this issue is also tied in with, for some reason, my ng-repeat directive isn't working. (It's not repeating.)

Can someone help me out? I'm trying to draw a table. In this example, when it's done, it should have the respective "idea" posted multiple times across the same row, and each row should have a different "idea", as listed in the $scope.

It's creating one single row filled with blanks (rather than {{idea}} ).

index.html

<!doctype html>
<html ng-app="AppName">
<head>
<link rel="stylesheet" type="text/css" href="styles/table.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>

<body>
<div ng-controller="TableController">
<table>
<tr>
<td>
<table cellspacing="0">
<tr class="title_bar">
<td>Title</td>
<td>Rating</td>
<td>Votes</td>
<td>Comments</td>
<td>Post Date</td>
<td>Status</td>
</tr>
</table>
</td>
</tr>
<div ng-repeat="idea in ideas">
<tr style="color: white">
<td>{{idea}}</td>
<td>{{idea}}%</td>
<td>{{idea}}</td>
<td>{{idea}}</td>
<td>{{idea}}</td>
<td>{{idea}}</td>
</tr>
</div>
</table>
</div>

<script src="scripts/controllers/TableController.js"></script>
</body>

</html>


TableController.js

var app = angular.module('AppName', []);

app.controller('TableController', ['$scope',function($scope){
$scope.ideas = [
'wow',
'cool',
'so nice',
'amazing',
'please work'
];
}]);


I'm probably missing something obvious but I appreciate any help you could give me.

Edit: Whoops, guess I need to brush up on my HTML basics.

Answer Source

Well, your HTML layout looks pretty strange. You shouldn't put <div> between <tr>

Try something like this:

<table>
    <tr class="title_bar">
        <td>Title</td>
        <td>Rating</td>
        <td>Votes</td>
        <td>Comments</td>
        <td>Post Date</td>
        <td>Status</td>
    </tr>
    <tr ng-repeat="idea in ideas">
        <td>{{idea}}</td>
        <td>{{idea}}%</td>
        <td>{{idea}}</td>
        <td>{{idea}}</td>
        <td>{{idea}}</td>
        <td>{{idea}}</td>
    </tr>
</table>

Fiddle demo