CODEWITHSUNDEEP
angularjs
user6680
user6680

Reputation: 139

angular array not outputting in ng-repeat

I have an array called reviews in my app.js file. I'm trying to output the two hardcoded reviews on the screen, but nothing appears. The error in the console says that the mainfunction is undefined, but I defined it I though with the correct syntax. Can anyone tell me what's the issue with my code. currently the page is blank and no reviews are outputting to the screen.

app.js

 var app = angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
$routeProvider
.when('/page1', {
templateUrl: 'page1.html'

})
.when('/page2', {
    templateUrl: 'page2.html'

});

$locationProvider.html5Mode({enabled: true, requireBase: false});
app.controller('mainController', function($scope){
$scope.reviews = [
{
    name: 'Joe',
review: "awesome site. Super informative"
},
{
name: 'Bill',
review: "Sweet site dude!"

}
];

});

}]);

index.html

   <html ng-app="myApp">
<head>
<link rel="stylesheet" type="text/css" href="app.css">

</head>
<body>
<div id="headerBar">
<a ng-href="/page1" id="page1">Page 1</a>
<a ng-href="/page2" id="page2">Page 2</a>
</div>
<div id="templateView" ng-view></div>

<div id="reviews" ng-controller="mainController">
<div id="reviewOutput" ng-repeat="review in reviews">
    {{review.name}}

</div>


</div>
<script src='bower_components/angular/angular.js'></script>
<script src="bower_components/angular-route/angular-route.js">

</script>
<script src="app.js"></script>
</body>
</html>

Console Error

Error: [ng:areq] Argument 'mainController' is not a function, got undefined
http://errors.angularjs.org/1.5.7/ng/areq?p0=mainController&p1=not%20a%20function%2C%20got%20undefined
    at angular.js:68
    at assertArg (angular.js:1885)
    at assertArgFn (angular.js:1895)
    at $controller (angular.js:10210)
    at setupControllers (angular.js:9331)
    at nodeLinkFn (angular.js:9116)
    at compositeLinkFn (angular.js:8510)
    at compositeLinkFn (angular.js:8513)
    at compositeLinkFn (angular.js:8513)
    at publicLinkFn (angular.js:8390)

Upvotes: 0

Views: 116

Answers (3)

HaikelO
HaikelO

Reputation: 106

try this https://plnkr.co/edit/1zn6FLr8oRWHE9Y89k4z?p=preview

app.controller('mainController',['$scope', function($scope){
   $scope.reviews = [
   {
       name: 'Joe',
       review: "awesome site. Super informative"
    },
    {
       name: 'Bill',
       review: "Sweet site dude!"

     }];

}]);

if you want to use object in DOM you need to add $scope

Upvotes: 0

Khan
Khan

Reputation: 18172

Currently your reviews array is private. Attach it to this to make it part of the controller.

...

this.reviews = [
{
    name: 'Joe',
    review: "awesome site. Super informative"
},
{
    name: 'Bill',
    review: "Sweet site dude!"    
}
];

Upvotes: 0

JB Nizet
JB Nizet

Reputation: 692231

Variables in angular expressions refer to attributes of the $scope. Not to local variables defined in the controller, which, by definition, are only accessible from the controller (since they are local variables).

app.controller('mainController', function($scope) {
    $scope.reviews = [ ... ];
});

and

<div id="reviewOutput" ng-repeat="review in reviews">

Since you're using controllerAs, the controller itself is in the $scope, in a field that you chose to name ctrl. So the view can access the controller, and its fields. So you can do

app.controller('mainController', function() {
    this.reviews = [ ... ];
});

and

<div id="reviewOutput" ng-repeat="review in ctrl.reviews">

Upvotes: 2

Related Questions