Question

我正在学习AngularJS（因此对此我是个菜鸟），我正在关注有关Udemy的教程。我什至查看了文档，并尝试了他们提供的接线。我似乎无法在表中获取客户数据。我在做什么错，请您多加解释，这样我才能学习正确的AngularJS面试方式？任何帮助深表感谢。顺便说一下，我正在使用最新版本的AngularJS 1.7

(function () {
  var CustomersController = function($scope) {
    $scope.sortBy = 'name';
    $scope.reverse = false;

    $scope.customers = [{name:'sanjeet', joined:'2000-12-02', orderTotal: 10.096, age: 26}, {name:'gurpreet', orderTotal:201.961, joined:'2005-12-07',age: 24}, {name:'nikki', orderTotal: 14.561, joined:'2001-11-02', age: 25}];

    $scope.doSort = function(propName) {
      $scope.sortBy = propName;
      $scope.reverse = !scope.reverse;
    };
  };
  angular.module('app').contoller('CustomersController', CustomersController)
}())

// app.controller('CustomersController', ['$scope', function($scope) {
//   $scope.sortBy = 'name';
//   $scope.reverse = false;
//
//   $scope.customers = [{name:'sanjeet', joined:'2000-12-02', orderTotal: 10.096, age: 26}, {name:'gurpreet', orderTotal:201.961, joined:'2005-12-07',age: 24}, {name:'nikki', orderTotal: 14.561, joined:'2001-11-02', age: 25}];
//
//   $scope.doSort = function(propName) {
//     $scope.sortBy = propName;
//     $scope.reverse = !scope.reverse;
//   };
// }])

<!DOCTYPE html>
<html ng-app>
  <head>
    <title>My first AngularJS project</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <h3>Customers</h3>
    Filter: <input type="text" ng-model="customerFilter.name"/>
    <br />
        <table ng-controller="CustomersController">
          <tr>
            <th ng-click="doSort('name')">
              Name
            </th>
            <th ng-click="doSort('age')">
              Age
            </th>
            <th ng-click="doSort('joined')">
              Joined
            </th>
            <th ng-click="doSort('orderTotal')">
               Order Total
            </th>
          </tr>
          <tr ng-repeat="customer in customers | filter: customerFilter | orderBy:sortBy:reverse" >
            <td>
              {{customer.name}}
            </td>
            <td>
              {{customer.age}}
            </td>
            <td>
              {{customer.joined | date: 'yyyy-MM-dd'}}  <!--medium, longDate -->
            </td>
            <td>
              {{customer.orderTotal | currency: 'y'}}
            </td>
          </tr>
        </table>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
    <script src="app/controllers/customersController.js"></script>
    <script> var app = angular.module('app', [])</script>
  </body>
</html>

Answer 1

您遇到多个问题，导致您的应用无法加载。您应该考虑使用angular.js而不是angular.min.js来在控制台中收到更好的错误消息，这将有助于您识别错误。

您的控制器代码中有错字。 angular.module('app').contoller('CustomersController', CustomersController)。 .controller缺少r。
在更高版本的angular（1.3+）中不能使用<html ng-app>。这是很老的语法。正确的语法是识别应用程序模块。 <html ng-app="app">。
必须在使用该控制器的控制器之前定义。即

<script> var app = angular.module('app', [])</script>

必须先出现

<script src="app/controllers/customersController.js"></script>
您的Filter: <input type="text" ng-model="customerFilter.name"/>行在控制器的外部内，因此将不起作用。您应该将ng-controller="CustomersController"移到body而不是table或包装div到return SOMEVALUE;。

我创建了一个plunker并更新了您的代码，显示了该应用程序的功能状态。

无法从控制器AngularJS检索数据

1 个答案: