AngularJS ng-repeat不起作用

嗨我有一張數據表，我試圖通過ng-repeat訪問。我想我的代碼中有一切都正確，但是當我加載頁面時，數據不會加載。我不確定我做錯了什麼。這裏是我的表：AngularJS 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' 
     } 
    ]; 
}

我收到錯誤消息參數 'report.controller' 不是一個函數，得到了不確定。上次我得到這個錯誤信息時，我有一個錯誤，但這次我在代碼中看不到任何拼寫錯誤。

來源

2015-10-15 hollyquinn

你在哪裏分配控制器到視圖？ –

另外我認爲你沒有使用$ scope服務 – refactor

我實際上並沒有構建這個項目，所以我不太瞭解其中的一些工作原理，但是vm被用來代替$ scope，並且在所有其他頁面中，不使用ng-controller。儘管我收到相同的錯誤信息，但是當我將其寫入我的頁面時。對於我缺乏知識感到抱歉。我剛剛學習了Angular，並被扔進了這個超級大計劃，這個計劃由一個與Angular合作的人所寫，並且不再在這裏。 – hollyquinn

檢查下面工作的代碼片段 -

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>

希望這會解決你的問題！

來源

2015-10-15 15:49:57

我將其更改爲vm.sales，仍然收到相同的錯誤消息。 – hollyquinn

@hollyquinn - 檢查編碼的工作副本的編輯答案。希望這會解決你的問題！ –

謝謝！它正在工作！ – hollyquinn

問題似乎是，你有變量名，在控制器vm.sale和HTML循環直通vm.sales（額外S）

來源

2015-10-15 15:48:48

我改變了這一點。現在我在控制器中獲得了vm.sales，在視圖中獲得了ng-repeat =「sale in vm.sales」。仍然收到相同的錯誤消息。 – hollyquinn

AngularJS ng-repeat不起作用

回答

相關問題