calling and iterating over function return value using ng-repeat in AngularJS

Question

I am currently refactoring my main controller in my small AngularJS application after reading about mocking server dependancies in JS and AngularJS apps.

In my markup I iterate over the "main events" using the ng-repeat directive:

This is my AngularJS module, refactored repository and controller.

However I am unable to access the main event array in this way - what am I missing?

// Module
var app = angular.module('MainEventApp', ['cloudinary']);

// Repository
app.service('MainEventRepository', ['$http', function($http) {

    this.$http = $http;

    this.getMainEvents = function() {

        return [
        {
            id: 1,
            roman_numeral: 'I',
            name: 'Hulk Hogan & Mr T vs Rowdy Roddy Piper & Paul Orndorff',
            venue: 'Madison Square Garden',
            state: 'New York',
            attendance: 19121
        },
        {
            id: 2,
            roman_numeral: 'II',
            name: 'Hulk Hogan vs King Kong Bundy',
            venue: 'Split-Transmission',
            state: 'New York/Illinois/California',
            attendance: 40085
        }
        ];
  };

}]);

// Controller
app.controller("MainEventCtrl", ['$scope', 'MainEventRepository', function ($scope, MainEventRepository) {

    MainEventRepository.getMainEvents().then(function(main_events) {
        //$scope.main_events = main_events;
        return main_events;
    });    

}]);

My live application can be seen here (not yet refactored).

Please include your markup. If you apply methods to 'this', you need to use the controllerAs syntax in the router or ng-controller. — Martin
– Martin, Commented Oct 16, 2014 at 17:18

Anton Telesh · Accepted Answer · 2014-10-16 17:14:14Z

1

First, to use main_events in your markup you need to have this property in your controller scope.

Second, your service returns simple array, but in your controller you use it as if it would return promise.

So, your controller code should be something linke this:

app.controller("MainEventCtrl", ['$scope', 'MainEventRepository', function ($scope, MainEventRepository) {

    $scope.main_events = MainEventRepository.getMainEvents();

}]);

And your markup:

<li ng-repeat="event in main_events"></li>

answered Oct 16, 2014 at 17:14

Anton Telesh

3,9323 gold badges25 silver badges33 bronze badges

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

Comments

John Farrell · Accepted Answer · 2014-10-16 17:13:49Z

0

You have to add main_events to your scope.

MainEventRepository.getMainEvents().then(function(main_events) {
    //$scope.main_events = main_events;
    return main_events;
});

Why is the first line in that promise commented out?

answered Oct 16, 2014 at 17:13

John Farrell

24.7k10 gold badges82 silver badges112 bronze badges

Collectives™ on Stack Overflow

calling and iterating over function return value using ng-repeat in AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related