1

我是 Angular JS 的新手。请帮我找出这个演示 只显示的原因：{{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>
4

4 回答 4

2

首先要angularjs在自定义之前移动 cdn 文件引用，script以便angular在使用对象之前使其可用。

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

在这里演示

于 2016-04-30T20:00:08.703 回答
0

您所要做的就是更改文件中的顺序，无需其他操作。见下文：

<!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>
于 2016-04-30T20:10:38.087 回答
0

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

于 2016-04-30T20:01:09.877 回答
0

您尚未将ng-appand添加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

于 2016-04-30T20:02:05.780 回答