CODEWITHSUNDEEP
javascripthtmlangularjs
Ketan Bhavsar
Ketan Bhavsar

Reputation: 5396

Angular JS - ng-repeat is not working properly

I tried to make an example similar to the examples in https://angularjs.org/

Here is the JS fiddle I have created.

Can some one help. What is wrong in this?

HTML is..

<h2>
To Do
</h2>
<div ng-controller="ToDoListController as todoList">
  <ul>
    <li ng-repeat="todo in todoList.todos">
      {{todo.text}}
    </li>
  </ul>
</div>

and JS part is

angular.module('todoApp',[]).controller('ToDoListController', 
function(){
var todoList = this;
    todoList.todos = [
      {text:'learn angular', done:true},
      {text:'build an angular app', done:false}];
});

Link for JS Fiddle.

Upvotes: 0

Views: 163

Answers (3)

ojus kulkarni
ojus kulkarni

Reputation: 1907

CONTROLLER

angular.module('todoApp',[]).controller('ToDoListController',function(){
$scope.todoList = [];
$scope.todoList = [
  {text:'learn angular', done:true},
  {text:'build an angular app', done:false}];
});

HTML

<html>
<body ng-app="myApp" >
<h2>
 To Do
</h2>
<div ng-controller="ToDoListController">
  <ul>
     <li ng-repeat="todo in todoList">
      {{todo.text}}
     </li>
  </ul>
</div>
</body>
</html>

Upvotes: 0

frishi
frishi

Reputation: 882

You need to access the property in this manner:

{{todo["text"]}}

I made the update to your fiddle.

Upvotes: 0

Amit
Amit

Reputation: 4292

I edited your fiddle. There were two issues

  1. Body tag should be enclosed in <>
  2. Angular js was not being used

Upvotes: 1

Related Questions