Angular JS: unable to display value

Question

Angular JS: unable to display value

171 Views Asked by Dan At 20 October 2024 at 19:58

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>

Original Q&A

There are 4 best solutions below

Sajeetharan On 30 April 2016 at 20:02

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

Max Kroshka On 30 April 2016 at 20:10

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>

Zakaria On 30 April 2016 at 20:01

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

**Pankaj Parkar** · Accepted Answer

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

Angular JS: unable to display value

There are 4 best solutions below

Related Questions in JAVASCRIPT

Related Questions in ANGULARJS

Related Questions in ANGULARJS-SCOPE

Related Questions in ANGULARJS-CONTROLLER

Related Questions in NG-APP

Trending Questions

Popular # Hahtags

Popular Questions