Question

我的代码：

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

我不知道错误在哪里。

Answer 1

您没有申报该应用。例如：

<html ng-app="phonecatApp">

详见AngularJS example

Answer 2

请参阅此处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' }
        ];
      });

AngularJS简单控制器无法正常工作

2 个答案: