Angular JS: unable to display value

Question

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>

there seems to be no controller or app defined in your HTML

blurfus
– blurfus

2016-04-30 20:00:34 +00:00
Commented Apr 30, 2016 at 20:00 — blurfus
– blurfus, Commented Apr 30, 2016 at 20:00

Pankaj Parkar · Accepted Answer · 2016-04-30 20:16:25Z

2

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

edited Apr 30, 2016 at 20:16

answered Apr 30, 2016 at 20:00

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Dan Over a year ago

oh ! thanks , My mistake in my original code was First thing move angularjs cdn file reference before custom script to make angular object available before using it.

Pankaj Parkar Over a year ago

@Ashu you also need to add ng-app & ng-controller directive to make it working as I suggested in answer..did you looked at plunkr?

Dan Over a year ago

Can you please update this New Similar fiddle jsfiddle.net/7yejxcu3/9 ,this is not working, plz tell me reason too

Pankaj Parkar Over a year ago

Sure I'll look at it once I will have access to machine.. But ideally you could open new question, as you have already got answer for this question..

Dan Over a year ago

thanks it worked. I didn't ask new question because I feel it will scam this website by asking similar kind of multiple question.

|

Zakaria · Accepted Answer · 2016-04-30 20:01:09Z

0

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">

answered Apr 30, 2016 at 20:01

Zakaria

15.1k22 gold badges86 silver badges126 bronze badges

Comments

Max Kroshka · Accepted Answer · 2016-04-30 20:10:38Z

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>

Sajeetharan · Accepted Answer · 2016-04-30 20:13:24Z

0

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

edited Apr 30, 2016 at 20:13

answered Apr 30, 2016 at 20:02

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Collectives™ on Stack Overflow

Angular JS: unable to display value

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related