CODEWITHSUNDEEP
javascriptangularjsangularjs-scopeangularjs-controllerng-app
Dan
Dan

Reputation: 2174

Angular JS: unable to display value

I am a new learner of Angular JS. Please help me to find reason why this demo only display : {{name}} instead of showing each values, 

 <!DOCTYPE html>
<html>
    <head>
        <title>AngularJS Demos</title> 
    </head>
    <body> 
        <div class="container" data-ng-app="demoApp" data-ng-controller="SimpleController">
            <h3>Adding a Simple Controller</h3>
            <ul>
                <li data-ng-repeat="name in names">{{name}}</li>
            </ul>
        </div> 
        <script  type="text/javascript">
            var samplesModule = angular.module('demoApp', []); 
            samplesModule.controller('SimpleController', SimpleController);
            function SimpleController($scope) {
                $scope.names = ['Dave', 'Napur', 'Heedy', 'Shriva'];
            }
        </script> 
        <script src="https://code.angularjs.org/1.3.9/angular.js"></script> 
    </body>
</html>

Upvotes: 1

Views: 174

Answers (4)

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

First thing move angularjs cdn file reference before custom script to make angular object available before using it.

Thereafter do add ng-app="samples" on html element & ng-controller="SimpleController" on body tag will solve your issue. (Removed above line as OP modified his code after I answered).

Demo Here

Upvotes: 2

Sajeetharan
Sajeetharan

Reputation: 222582

You have not added ng-app and ng-controller to your View.

   <body > 
        <div ng-app="samples" class="container"  ng-controller="SimpleController">
            <h3>Looping with the ng-repeat Directive</h3>
            <h4>Data to loop through is initialized using ng-init</h4>
            <ul>
                <li data-ng-repeat="name in names">{{name}}</li>
            </ul>
        </div>
   </body>

Here is the working app

Upvotes: 0

Max Kroshka
Max Kroshka

Reputation: 487

All you have to do is change the order in your file, no other operations necessary. See below:

<!DOCTYPE html>
<html>
  <head>
    <title>AngularJS Demos</title> 
    <script src="https://code.angularjs.org/1.3.9/angular.js"></script> 
  </head>
  <body> 
    <script  type="text/javascript">
      var samplesModule = angular.module('demoApp', []); 
      samplesModule.controller('SimpleController', SimpleController);
      function SimpleController($scope) {
        $scope.names = ['Dave', 'Napur', 'Heedy', 'Shriva'];
      }
    </script> 
    <div class="container" data-ng-app="demoApp" data-ng-controller="SimpleController">
      <h3>Adding a Simple Controller</h3>
      <ul>
        <li data-ng-repeat="name in names">{{name}}</li>
      </ul>
    </div> 
  </body>
</html>

Upvotes: 0

Zakaria
Zakaria

Reputation: 15070

You didn't declare the controller and so for the app. Edit as following : <div class="container" data-ng-controller="SimpleController" and <body data-ng-app="samples">

Upvotes: 0

Related Questions