AngularJS简单控制器不工作

AngularJS simple controller is not working

本文关键字:工作 控制器 简单 AngularJS      更新时间:2023-09-26

我的代码:

<!DOCTYPE html>
<head>
 <title>Learning AngularJS</title>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"     type="text/javascript"></script>
</head>
<body>
  <div class="container" style="background: #eec; min-height:300px; margin-top: 15px;" ng-controller="SimpleController">
    <ul>
      <li ng-repeat="woman in customer">{{ woman.name }}</li>
    </ul>
  </div>

JS(控制器和数据):

<script>
  function SimpleController($scope) {
    $scope.customer = [
      { name: 'Kamila', city: 'Opava' }, 
      { name: 'Nikola', city: 'Opočno' }, 
      { name: 'Jana', city: 'Pardubice' }, 
      { name: 'Martina', city: 'Hradec Kralove' }, 
      { name: 'Justýna', city: 'Chrudim' }
    ];
  };
</script>
</body>
</html>

结果我的浏览器:仅{{ woman.name }}

我不知道哪里出了错。

您没有声明应用程序。示例:

<html ng-app="phonecatApp">

请参阅AngularJS示例的详细信息

请参阅此处http://jsbin.com/vaweyu/1/edit

HTML:

<html ng-app="app">
<head>
 <title>Learning AngularJS</title>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"     type="text/javascript"></script>
</head>
<body>
  <div class="container" style="background: #eec; min-height:300px; margin-top: 15px;" ng-controller="SimpleController">
    <ul>
      <li ng-repeat="woman in customer">{{ woman.name }}</li>
    </ul>
  </div>
</html>

JS:

var app = angular.module("app", []);

   app.controller('SimpleController', function ($scope) {
        $scope.customer = [
          { name: 'Kamila', city: 'Opava' }, 
          { name: 'Nikola', city: 'Opočno' }, 
          { name: 'Jana', city: 'Pardubice' }, 
          { name: 'Martina', city: 'Hradec Kralove' }, 
          { name: 'Justýna', city: 'Chrudim' }
        ];
      });