Question

我一直在使用AngularJS已经有一段时间了，这个特殊的代码块并不难，但是它没有用，而且必须有一些非常简单的东西，我错过了这里：

<!DOCTYPE html>
<html data-ng-app="">
  <head>
    <title>Simple ngRepeat with Data-Binding</title>
  </head>
  <body>
    <div data-ng-controller="SimpleController">
      Name
      <br />
      <input type="text" data-ng-model="name" />
      <br />
      <ul>
        <li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">
          {{ cust.name }} ({{ cust.city | uppercase }})
        </li>
      </ul>
    </div>
    <script type="text/javascript">
      function SimpleController($scope) {
        $scope.customers = [
          {name: 'Bob', city: 'Atlanta'},
          {name: 'James', city: 'Orlando'},
          {name: 'Miles', city: 'Harlem'},
          {name: 'Carter', city: 'San Francisco'}
        ];
      }
    </script>
    <script src="angular.min.js"></script>
  </body>
</html>

截至目前，此代码会生成空白页。应该有一个带有四个记录的无序列表，例如，键入＆＃39; Bob＆＃39;在输入框中应该将记录过滤到唯一包含名称＆＃39; Bob＆＃39;。

的记录。

当AngularJS代码内联且没有控制器时，此演示已经工作。我曾使用 ngInit 来提供客户数组。当我试图将客户放在他们自己的控制器中时，我开始收到一个空白页面。

我确定我只需要第二双眼睛来看一下这个非常简单的例子。

感谢您提供的任何帮助。

Answer 1

<!DOCTYPE html>
<html data-ng-app="app">
  <head>
    <title>Simple ngRepeat with Data-Binding</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </head>
  <body>
    <div data-ng-controller="SimpleController">
      Name
      <br />
      <input type="text" data-ng-model="name" />
      <br />
      <ul>
        <li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">
          {{ cust.name }} ({{ cust.city | uppercase }})
        </li>
      </ul>
    </div>
    <script type="text/javascript">
      angular.module('app', []).controller('SimpleController', SimpleController);
      function SimpleController($scope) {
        $scope.customers = [
          {name: 'Bob', city: 'Atlanta'},
          {name: 'James', city: 'Orlando'},
          {name: 'Miles', city: 'Harlem'},
          {name: 'Carter', city: 'San Francisco'}
        ];
      }
    </script>
  </body>
</html>

您可以在演示中更改多项内容。

您应该创建一个新的角度模块

var module = angular.module(name, [dependencies])
该模块应使用ng-app
进行自举
ng-app="nameOfApp"
应将控制器添加到已定义的模块

module.controller('SimpleController', SimpleController);

编辑：没有指定模块的结果相同

<!DOCTYPE html>
<html data-ng-app="">
  <head>
    <title>Simple ngRepeat with Data-Binding</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </head>
  <body>
    <div data-ng-controller="SimpleController">
      Name
      <br />
      <input type="text" data-ng-model="name" />
      <br />
      <ul>
        <li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">
          {{ cust.name }} ({{ cust.city | uppercase }})
        </li>
      </ul>
    </div>
    <script type="text/javascript">
      function SimpleController($scope) {
        $scope.customers = [
          {name: 'Bob', city: 'Atlanta'},
          {name: 'James', city: 'Orlando'},
          {name: 'Miles', city: 'Harlem'},
          {name: 'Carter', city: 'San Francisco'}
        ];
      }
    </script>
  </body>
</html>

简单的AngularJS控制器演示不起作用

1 个答案: