AngularJS ng-repeat 不起作用答案

【问题标题】：AngularJS ng-repeat not workingAngularJS ng-repeat 不起作用
【发布时间】：2015-10-15 15:43:26
【问题描述】：

您好，我有一个数据表，我正尝试通过 ng-repeat 访问它。我想我的代码中的一切都是正确的，但是当我加载页面时，数据没有加载。我不确定我做错了什么。这是我的桌子：

<table class="table table-bordered table-hover table-responsive" 
       ng-repeat="sale in vm.sales">
<thead>

    <tr>
        <th>
            Date Ordered
        </th>
        <th>
            Retail
        </th>           
    </tr>
</thead>
<tbody>
    <tr>
        <td>
            {{ sale.dateOrdered }}
        </td>
        <td>
            {{ sale.firstLoadRetail}}
        </td>
    </tr>
    <tr>
        <th>
            Subtotal
        </th>
    </tr>
</tbody>

这是我的控制器：

(function () {

'use strict';

angular
  .module('crm.ma')
  .controller('ReportCtrl', ReportCtrl);


function ReportCtrl() {
    var vm = this;

    vm.sale = [
        {
            dateOrdered: '05/10/2015',
            firstLoadRetail: '75',
            firstLoadCost: '65',
            instantProfitAirTime: '9',
            instantProfitSpiff: '59',
            netRetail: '75',
            netCost: '7',
            netProfit: '67',
            count: '0',
            billAmount: '45'
        },
        {
            dateOrdered: '06/22/2015',
            firstLoadRetail: '85',
            firstLoadCost: '75',
            instantProfitAirTime: '10',
            instantProfitSpiff: '86',
            netRetail: '22',
            netCost: '8',
            netProfit: '22',
            count: '0',
            billAmount: '35'
        }
    ];
}

我收到错误消息 Argument 'report.controller' is not a function, got undefined。上次我收到此错误消息时有一个拼写错误，但这次我的代码中没有看到任何拼写错误。

【问题讨论】：

你在哪里将控制器分配给视图？
另外我认为你没有使用 $scope 服务
我实际上并没有构建这个项目，而且对 Angular 来说太新了，以至于我不完全理解其中一些是如何工作的，但是使用 vm 代替了 $scope，并且在所有其他页面 ng-controller 未使用。即使我在我的页面上这样做，但我收到相同的错误消息。我很抱歉我缺乏知识。我刚刚学习了 Angular，然后被扔进了这个超级大的程序，这个程序是由一个 Angular 的高手编写的，现在已经不在了。
此代码缺少您声明ng-controller 并分配vm 的行，此行似乎是您描述的错误来自的行。这不是您的代码的完整示例。请注意，vm 可能在路由器提供程序中分配，而不是在此处的 HTML 中。
无论哪种方式，此错误都将report.controller 描述为无效参数，但这不是使用report.controller 的代码库区域。您是否在代码中搜索过report.controller？

标签： angularjs angularjs-ng-repeat

【解决方案1】：

检查下面的工作代码 sn-p -

angular
.module('myApp',[])
.controller('myCtrl', ['$scope', function($scope){

  $scope.sales = [
        {
            dateOrdered: '05/10/2015',
            firstLoadRetail: '75',
            firstLoadCost: '65',
            instantProfitAirTime: '9',
            instantProfitSpiff: '59',
            netRetail: '75',
            netCost: '7',
            netProfit: '67',
            count: '0',
            billAmount: '45'
        },
        {
            dateOrdered: '06/22/2015',
            firstLoadRetail: '85',
            firstLoadCost: '75',
            instantProfitAirTime: '10',
            instantProfitSpiff: '86',
            netRetail: '22',
            netCost: '8',
            netProfit: '22',
            count: '0',
            billAmount: '35'
        }
    ];

 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">



<div ng-controller="myCtrl">
  <table class="table table-bordered table-hover table-responsive" ng-repeat="sale in sales">
<thead>

    <tr>
        <th>
            Date Ordered
        </th>
        <th>
            Retail
        </th>           
    </tr>
</thead>
<tbody>
    <tr>
        <td>
            {{ sale.dateOrdered }}
        </td>
        <td>
            {{ sale.firstLoadRetail}}
        </td>
    </tr>
    <tr>
        <th>
            Subtotal
        </th>
    </tr>
</tbody>
</div>
</div>

希望这能解决你的问题！

【讨论】：

我将其更改为 vm.sales，仍然收到相同的错误消息。
@hollyquinn - 检查代码工作副本的编辑答案。希望这能解决您的问题！

【解决方案2】：

问题似乎是您在控制器中将变量名称为 vm.sale 并在 html 中通过 vm.sales 循环（附加）

【讨论】：

我改变了这个。现在我在控制器中有 vm.sales，视图中有 ng-repeat="sale in vm.sales"。仍然收到相同的错误消息。