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 AngularJS Basics (1.x) Using Angular's Built In Directives Using ng-repeat to inject HTML for every data element

Anthony c
Anthony c
20,907 Points

ng-repeat="todo in todos" creates an object called todo?

When I type in:

ng-repeat="todo in todos"

Angular is searching for an array named "todos". Once it finds that array, it then identifies each of the objects in that "todos array" as a "todo" object?

In other words, prior to declaring "todo in todos", angular does not know that a "todo" object exists?

For example, if I said

ng-repeat="dude in todos"

angular would identify those objects as "dude" objects rather than "todo" objects?

Anthony c
Anthony c
20,907 Points

Or, is the only reason we can say "todo in todos" because we used ng-model prior to ng-repeat when we declared a todo object with "name" and "completed" properties?

Thus, we need to use ng-model (or some other strategy) to let angular know that a "todo" object exists BEFORE we can say ng-repeat="todo in todos" ?

3 Answers

I would think of it as a forEach loop in vanilla javascript.

todos = [{
  name: 'Do the dishes',
  completed: false
  },
  {
    name: 'Do your laundry ',
    completed: true
  }]
todos.forEach(function(whatEverYouWant) {
  console.log(whatEverYouWant);
});
//=>Object {name: "Do the dishes", completed: false}
//=>Object {name: "Do your laundry ", completed: true}

<div ng-repeat="whatEverYouWant in todos">
  //Your HTML
</div>

Todos would be some array that is on your angular $scope. In ng-repeat the first part doesn't really matter what it is. You should put something that makes semantic scenes but can be what ever you want. Its just like the parameter in the forEach function. Hope that helps

Anthony c
Anthony c
20,907 Points

So I can say "todo in todos" without ever declaring a todo object anywhere else in the codebase?

It's just a coincidence that in this project we happen to declare a todo object prior to declaring "todo in todos"?

Yes, todo is declared in the ng-repeat and only exist within the ng-repeat. If you have todo declared else where it will still work.

Jake Lundberg
Jake Lundberg
13,965 Points

The todo part is just a variable name...you could name it whatever you want. This variable will hold the value of each element of the todos array, one at a time.

Brian Stumbaugh
Brian Stumbaugh
2,161 Points

"It's just a coincidence that in this project we happen to declare a todo object prior to declaring "todo in todos"?"

yeah he says that at some point in this video that he already had everything set up with todo.name or todo.completed. It was a kinda backwards way of doing it. So then when we do todo in todos, it all ties in together.

Michael Ross
Michael Ross
11,204 Points

The todos in the previous videos and steps creates a property within the mainCtrl scope. This '$scope.todo.completed' was created to create the todo property within the mainCtrl scope. In this video, the todo is now a variable that is used to store each object within the todos array. However, once we do this, each todo has created its own scope.