The ng-repeat directive is utilized to iterate through the children of the $scope object

Question

There has been some discussion on whether it is better to use a child object on a scope instead of adding directly to the scope itself. For example:

$scope.model.mystuff

is said to be better than

$scope.mystuff

Surprisingly, my first simple code snippet using ng-repeat works even without following this recommendation...

$scope.myStuff = [{},{},{}]

<div ng-repeat="things in myStuff">Test</div>

When I run the above code, I see the word Test displayed 3 times. However, when I try the following approach...

$scope.model.myStuff = [{},{},{}]

<div ng-repeat="things in model.myStuff">Test</div>

The loop doesn't work at all. It seems like there might be a simple solution to this issue that I am missing.

Answer 1

Answer №1

It might be helpful next time if you provide a jsfiddle to make troubleshooting easier :)

It seems like the issue was with how the $scope.model.myStuff was declared

$scope.model.myStuff = [{},{},{}]

At that point, $scope.model didn't exist, so I simply added it right before like this:

$scope.model = {}
$scope.model.myStuff = [{},{},{}]

After making this change, the ng-repeat displayed 'test' three times as expected.

Link to jsfiddle: http://jsfiddle.net/rtCP3/33/

Answer 2

It might be helpful next time if you provide a jsfiddle to make troubleshooting easier :)

It seems like the issue was with how the $scope.model.myStuff was declared

$scope.model.myStuff = [{},{},{}]

At that point, $scope.model didn't exist, so I simply added it right before like this:

$scope.model = {}
$scope.model.myStuff = [{},{},{}]

After making this change, the ng-repeat displayed 'test' three times as expected.

Link to jsfiddle: http://jsfiddle.net/rtCP3/33/