Angular JS：无法显示值

Question

我是 Angular JS 的新手。请帮我找出 this demo 只显示的原因：{{name}} 而不是显示每个值，

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

Answer 1

第一件事是在自定义 script 之前移动 angularjs cdn 文件引用以使 angular 对象在使用它之前可用。

~~此后在 html 元素上添加 ng-app="samples" 并在 body 标签上添加 ng-controller="SimpleController" 将解决您的问题。~~ （由于 OP 在我回答后修改了他的代码，因此删除了上面的行）。

Demo Here

Answer 2

您没有为应用程序声明控制器等。编辑如下：<div class="container" data-ng-controller="SimpleController" 和 <body data-ng-app="samples">

Answer 3

您还没有将 ng-app 和 ng-controller 添加到您的视图中。

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

这是工作app

Answer 4

您只需更改文件中的顺序，无需其他操作。见下文：

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

Angular JS：无法显示值

Angular JS: unable to display value

javascript

angularjs

angularjs-scope

angularjs-controller

ng-app