Question

我是非常新手学习Angular js。我正在关注视频教程，并做了以下示例。这不会显示任何输出。可以留言让我知道我错过了什么。

    <!DOCTYPE html>
<html >
<head>
    <title>Directives with Databinding</title>
    <meta charset="utf-8" />
    <script src="scripts/angular.min.js"></script>
</head>
<body ng-app="ngcontrollereg">
    <div ng-controller="SimpleController">
        Name: <input type="text" ng-model="name" />
        <br />
        <ol>
            <li ng-repeat="cust in customers | filter:name | orderBy:'city'">{{ cust.name | uppercase}}-{{cust.city}}</li>
        </ol>
    </div>

    <script>
        function SimpleController($scope) {
            $scope.customers = [
                { name: 'John Does', city: 'Phoenix' },
                { name: 'Lake Oswere', city: 'Phoenix' },
                { name: 'Raman', city: 'Kanchira' },
                { name: 'Alvaro', city: 'Kanchira' }
            ];
        }
    </script>
</body>
</html>

Answer 1

您需要创建角度模块并使用模块注册控制器：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="ngcontrollereg">
  <div ng-controller="SimpleController">
    Name:
    <input type="text" ng-model="name" />
    <br />
    <ol>
      <li ng-repeat="cust in customers | filter:name | orderBy:'city'">{{ cust.name | uppercase}}-{{cust.city}}</li>
    </ol>
  </div>

  <script>
    var app = angular.module('ngcontrollereg', []);
    app.controller('SimpleController', function($scope) {
      $scope.customers = [{
        name: 'John Does',
        city: 'Phoenix'
      }, {
        name: 'Lake Oswere',
        city: 'Phoenix'
      }, {
        name: 'Raman',
        city: 'Kanchira'
      }, {
        name: 'Alvaro',
        city: 'Kanchira'
      }];
    });
  </script>
</body>

＆＃13;

Answer 2

或者您可以像这样创建它：

angular.module('ngcontrollereg',[]).controller('SimpleController' ,function_Controller)

    function function_Controller($scope) {
        $scope.customers = [
            { name: 'John Does', city: 'Phoenix' },
            { name: 'Lake Oswere', city: 'Phoenix' },
            { name: 'Raman', city: 'Kanchira' },
            { name: 'Alvaro', city: 'Kanchira' }
        ];
    }

ngcontroller不会在html页面上呈现数据

2 个答案: