CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-directiveangularjs-ng-repeat
Mahesha999
Mahesha999

Reputation: 24831

why angularjs ng-repeat not working

I am trying out the basics of AngularJS first time. I am trying out ng-repeat first time. However it is not working.

Here is a non working jsfiddle.

I have written the code in single standalone HTML file as follows and also angular.js file resides in the same directory

<html ng-app> 
<head>
    <script type="text/javascript" src="angular.js"></script>
    <script type="text/javascript">
        var users = [
                      {
                          name:"Mahesh",
                          description:"A geek",
                          age:"22"
                      },
                      {
                          name:"Ganesh",
                          description:"A nerd",
                          age:"25"
                      },
                      {
                          name:"Ramesh",
                          description:"A noob",
                          age:"27"
                      },
                      {
                          name:"Ketan",
                          description:"A psychopath",
                          age:"26"
                      },
                      {
                          name:"Niraj",
                          description:"Intellectual badass",
                          age:"29"
                      }
                    ];
    </script>       
</head> 
<body>
    <div>
        <div data-ng-repeat="user in users">
            <h2>{{user.name}}</h2>
            <div>{{user.description}}</div>
        </div>
    </div>
</body>
</html>

Upvotes: 2

Views: 49278

Answers (4)

SantoshK
SantoshK

Reputation: 1877

you have not define the controller such as 

myapp.controller("AppController",function($scope){
 $scope.users=[
                      {
                          name:"Mahesh",
                          description:"A geek"
                      },
                    ];
});

/// than you can call controller to the view such as below code :

<body ng-controller="AppController">
    <div><div data-ng-repeat="user in users">
            <h2>{{user.name}}</h2>
            <div>{{user.description}}</div>
        </div>
    </div>
</body>

Live Example you can access by this link : http://jsfiddle.net/9yHjj/

Upvotes: 1

Nitin Shekhar
Nitin Shekhar

Reputation: 175

<html ng-app="myapp1">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var myapp = angular.module("myapp1",[]);
myapp.controller("AppController",function($scope){
 $scope.users=[
                      {
                          name:"Mahesh",
                          description:"A geek",
                          age:"22"
                      },
                      {
                          name:"Ganesh",
                          description:"A nerd",
                          age:"25"
                      },
                      {
                          name:"Ramesh",
                          description:"A noob",
                          age:"27"
                      },
                      {
                          name:"Ketan",
                          description:"A psychopath",
                          age:"26"
                      },
                      {
                          name:"Niraj",
                          description:"Intellectual badass",
                          age:"29"
                      }
                    ];
});
    </script>       
</head>
<body ng-controller="AppController">
    <div>
        <div data-ng-repeat="user in users">
            <h2 ng-bind="user.name"></h2>
            <div>{{user.description}}</div>
        </div>
    </div>
</body>
</html>

This code should work

Upvotes: 0

Vijendra Kumar Kulhade
Vijendra Kumar Kulhade

Reputation: 2265

Your code should have been like this....

<html ng-app="app">
<head>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript">
var app = angular.module("app",[]).controller(AppController,["$scope",function($scope){
 $scope.users=[
                      {
                          name:"Mahesh",
                          description:"A geek",
                          age:"22"
                      },
                      {
                          name:"Ganesh",
                          description:"A nerd",
                          age:"25"
                      },
                      {
                          name:"Ramesh",
                          description:"A noob",
                          age:"27"
                      },
                      {
                          name:"Ketan",
                          description:"A psychopath",
                          age:"26"
                      },
                      {
                          name:"Niraj",
                          description:"Intellectual badass",
                          age:"29"
                      }
                    ];
}])
    </script>       
</head>
<body ng-controller="AppController">
    <div>
        <div data-ng-repeat="user in users">
            <h2>{{user.name}}</h2>
            <div>{{user.description}}</div>
        </div>
    </div>
</body>
</html>

Upvotes: 0

Steve Kl&#246;sters
Steve Kl&#246;sters

Reputation: 9457

users must refer to a property that is accessible on the current scope. Scopes are AngularJS way of tying data from and to HTML. This is explained further in the "Model and Controller" chapter of the second tutorial page. See a working version of your Fiddle here.

HTH!

Upvotes: 6

Related Questions