Wheel60 Wheel60 - 2 months ago 6
AngularJS Question

couldn't figure out the issue with angular routing / ng-repeat.

The aboutus.html page is displayed correctly, except the content in the ng-repeat within media-list in aboutus.html. there are no errors displayed in the console. I have not included the entire code (since it takes more space.). Can anyone help me?

// factory here.
angular.module('vasuapp')

.factory('corporateFactory', function() {

// Implement two functions, one named getLeaders,
// the other named getLeader(index)
// Remember this is a factory not a service

var corpfac = {};

var leadership = [
{
id: 0,
name:"asdfd",
designation:"sgsdgg",
abbr: "fgdfvf",
},
{
// similarly some other data here.
} ];

corpfac.getLeader = function(){
return leadership;
};
corpfac.getLeaders = function(index)
{
return leadership[index];
};
return corpfac;

});

// app.js
angular.module('vasuapp', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider
.when('/aboutus', {templateUrl:'./aboutus.html' , controller: 'AboutController'})
.otherwise('/');
})

// controller.js

angular.module('vasuapp')
.controller ('AboutController',['$scope','corporateFactory', function($scope,corporateFactory){
var leadership = corporateFactory.getLeader();
$scope.leaders = this.leadership;
}])

// aboutus.html

<div class="row row-content">
<div class="col-xs-12 col-sm-9">
<h2>Corporate Leadership</h2>
<p> hi </p>
<ul class="media-list">
<li class = "media" ng-repeat = "lead in leaders">
<div class = "media-list tab-pane fade in active">
<a ng-href="#/aboutus">
<img class = "media-object" ng-src={{lead.image}} alt="author image">
</a>
</div>
<div class = "media-body">
<p>{{lead.description}}</p>
</div>
<footer>
-- {{lead.name}} the {{lead.designation}}
</footer>
</li>
</ul>
</div>

Answer

I think what you want is:

$scope.leaders = corporateFactory.getLeader();

this.leadership is not defined.