AngularJS ng-repeat not working

Question

Hi I have a table of data that I'm trying to access via ng-repeat. I think I've got everything correct in my code, but when I load the page the data doesn't load. I'm not sure what I'm doing wrong. Here is my table:

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

Here is my controller:

(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'
        }
    ];
}

I'm getting the error message Argument 'report.controller' is not a function, got undefined. Last time I got this error message I had a typo, but I'm not seeing any typos in my code this time.

I actually didn't build this project, and so new to angular that I don't completely understand how some of it works, but vm is used in place of $scope, and in all of the other pages ng-controller is not used. Even when I do at it to my page though I get the same error message. I'm sorry about my lack of knowledge. I just learned Angular and got thrown into this super big program written by someone who was a wiz with Angular and is no longer here. — hollyquinn
– hollyquinn, Commented Oct 15, 2015 at 15:49
This code is missing the line where you declare ng-controller and assign vm, this line would seem to be the line the error you are describing is coming from. This isn't a complete example of your code. note that the vm might be assigned in a router provider, and not in the HTML here. — Claies
– Claies, Commented Oct 15, 2015 at 16:37
either way, this error is describing report.controller as an invalid argument, but this isn't the area of the code base where report.controller is used. have you searched for report.controller in your code? — Claies
– Claies, Commented Oct 15, 2015 at 16:42

Manoj Shevate · Accepted Answer · 2015-10-15 16:04:34Z

3

check below working code snippet -

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>

Hope this will solve you problem!

edited Oct 15, 2015 at 16:04

answered Oct 15, 2015 at 15:49

Manoj Shevate

7424 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

hollyquinn Over a year ago

I changed it to vm.sales, still getting the same error message.

Manoj Shevate Over a year ago

@hollyquinn - Check Edited answer for working copy of the code. Hope this will solve your problem!

Srisudhir T · Accepted Answer · 2015-10-15 15:48:48Z

2

Issues seems to be that you have the variable name as vm.sale in controller and looping thru vm.sales in html (extra s)

answered Oct 15, 2015 at 15:48

Srisudhir T

71511 silver badges24 bronze badges

1 Comment

hollyquinn Over a year ago

I changed this. Now I've got vm.sales in the controller and ng-repeat="sale in vm.sales" in the view. Still getting the same error message.

Collectives™ on Stack Overflow

AngularJS ng-repeat not working

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related