Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Jonathan Broderick
Jonathan Broderick
12,409 Points
Posted by Jonathan Broderick
Jonathan Broderick
12,409 Points

ng-repeat hides all its elements

<!doctype html> <html> <head> <title>Treehouse Angular TodoApp</title> <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" type="text/css"> <link href="styles/main.css" rel="stylesheet" type="text/css"/> </head> <body ng-app="todoListApp">

<div ng-controller="mainCtrl" class="list">
  <h1>My TODOs</h1>
  <div ng-repeat="todo in todos">
    <input ng-model="todo.completed" type="checkbox"/>
    <label ng-hide="editing" class="editing-label">{{todo.name}}</label>
    <input ng-show="editing" ng-model="todo.name" class="editing-label" type="text"/>
    <div class="actions">
      <a href="" ng-click="editing = !editing">edit</a>
      <a href="" ng-click="helloWorld()">save</a>
      <a href="" class="delete">delete</a>
    </div>
  </div>
  {{todos}}
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js" type="text/javascript"></script>
<script src="scripts/app.js" type="text/javascript"></script>

</body> </html>

Okay, now I'm really stumped! In need of a sanity check here. Everything was working fine until I added the ng-repeat directive. Now, nothing but my h1 is showing up in the view. As far as I can tell, my code looks exactly like the instructor's, but it's definitely not working like his is. Any ideas?

Jonathan Broderick
Jonathan Broderick
12,409 Points
Jonathan Broderick
Jonathan Broderick
12,409 Points

Here is the js code:

angular.module('todoListApp', []) .controller('mainCtrl', function($scope) { $scope.helloWorld = function() { console.log('Hello there! This is the helloWorld controller function in the mainCtrl!');

$scope.todos = [
  {"name": "clean the house"},
  {"name": "water the dog"},
  {"name": "feed the lawn"},
  {"name": "pay dem bills"},
  {"name": "run"},
  {"name": "swim"}
];

}; });