ng-repeat not working for me.

Question

I am following along with the video and have copy/pasted the array (along with tried my own), but in the workspaces preview the data is not rendering as to-dos. The screen flashes for a second before all to-dos vanish....what am I doing wrong.

Here is my html:

<!doctype html> <html lang="en"> <head> <title></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"> <h1>My TODO'S</h1> <div ng-repeat="todo in todos"> <div class="list"> <input ng-model="todo.checked" type="checkbox" /> <label ng-hide="editing" class="editing-label">{{todo.name}}</label> <input ng-model="todo.name" ng-show="editing" type="text" class="editing-label"/> </div> <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> {{todo}} <script src="vendor/angular.js" type="text/javascript"></script> <script src="scripts/app.js" type="text/javascript"></script> </body> </html>

Here is my JavaScript:

angular.module("todoListApp", []) .controller('mainCtrl', function($scope){ $scope.helloWorld = function(){ console.log('This is some cool shit! AND you just clicked my button bitch!'); };

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

});

Answer 1 · 2016-07-08T20:12:52Z

July 8, 2016 8:12pm

Hi Joe... Probably your code isn't working because there is a missing directive (ng-controller='mainCtrl'), I tried this and it worked for me.

The HTML File:

<!doctype html>
<html lang="en" ng-app="todoListApp"> 
    <head> 
        <title></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-controller="mainCtrl"> 
        <h1>My TODO'S</h1> 
        <div ng-repeat="todo in todos"> 
            <div class="list"> 
                <input ng-model="todo.checked" type="checkbox" /> 
                <label ng-hide="editing" class="editing-label">{{todo.name}}</label> 
                <input ng-model="todo.name" ng-show="editing" type="text" class="editing-label"/> 
            </div> 
            <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> {{todo}} 
        <script src="vendor/angular.js" type="text/javascript"></script> 
        <script src="scripts/app.js" type="text/javascript"></script>
    </body> 
</html>

The JS File:

angular.module("todoListApp", []) 
.controller('mainCtrl', function($scope){ 
    $scope.helloWorld = function(){ 
        console.log('This is some cool shit! AND you just clicked my button bitch!'); 
    };
    $scope.todos = [
      {"name": "clean the house"},
      {"name": "water the dog"},
      {"name": "feed the lawn"},
      {"name": "pay dem bills"},
      {"name": "run"},
      {"name": "swim"}];
});

Answer 2 · 2016-07-09T16:53:05Z

July 9, 2016 4:53pm

Well that makes sense. Hmmmm looks like he never actually added that in the video's. Was following along.

Welcome to the Treehouse Community

Looking to learn something new?

Joe Hochgreve

Joe Hochgreve

ng-repeat not working for me.

2 Answers

Kevin Garibo

Kevin Garibo

Joe Hochgreve

Joe Hochgreve