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 An Introduction to Two-Way Data Binding Lists

Posted by Christiano Ronaldo
Christiano Ronaldo
Courses Plus Student 946 Points

AngularJS - Using ngRepeat

I dont know whats wrong!

index.html 
<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <title>Angular.js</title>
  <script src="js/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="myController">
<ul>
  <li ng-repeat="name in bowlofFruits">{{bowlOfFruit.name}}</li>
</ul>
</body>
</html>
app.js 
angular.module('myApp', [])
.controller('myController', function ($scope, $http) {
  $scope.bowlOfFruit = [
    {name: 'Apple'},
    {name: 'Pear'},
    {name: 'Orange'}
  ];
});
mikes02
mikes02
Courses Plus Student 16,968 Points

Hi Ben, it appears you are having some frustration with an AngularJS problem. You did a great job posting the code, however, it would be extremely beneficial to other forum members if you could more clearly describe the nature of your problem so that troubleshooting can be done in a more effective manner. If you get an opportunity, please edit your original post and include some more detailed information on where you are running into issues. Thank you!

I edited the title for you to something more descriptive and helpful to other members, too.

1 Answer

mikes02
mikes02
Courses Plus Student 16,968 Points

I'm not very experienced with AngularJS but I took a look at their documentation and tested your code locally to see that it wasn't working and have setup a functional example for you to test:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>Angular.js</title>
</head>
<body ng-controller="myController">
<ul>
  <li ng-repeat="name in bowlOfFruit">{{name.name}}</li>
</ul>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.13/angular.min.js"></script>
<script>
var myApp = angular.module('myApp',[]);

myApp.controller('myController', ['$scope', function($scope) {
  $scope.bowlOfFruit = [
    {name: 'Apple'},
    {name: 'Pear'},
    {name: 'Orange'}
  ];
}]);
</script>
</body>
</html>

There's a couple of areas I noticed mistakes.

1) You were using "name in bowlofFruits" when in fact in your controller it is "bowlOfFruit" notice the capital 'O' in Of and the lack of an 's' on Fruit.

2) For ng-repeat you were using "name in bowlofFruits" which as stated above should be "name in bowlOfFruit" and then you should be looking for {{name.name}}. This relates to their documentation on ng-repeat which states:

"variable in expression – where variable is the user defined loop variable and expression is a scope expression giving the collection to enumerate. For example: album in artist.albums."

3) Based on their documentation I separated the angular.module and assigned it to its own variable.

4) Used their documentation to restructure your controller.

Christiano Ronaldo
Christiano Ronaldo
Courses Plus Student 946 Points

Thanks a lot!

mikes02
mikes02
Courses Plus Student 16,968 Points

You're welcome, glad that it helped, if you have some time it would be great if you modified your original post to detail the problem as it may be helpful to others. If not, moving forward when you post a question, the more detailed the better.