AngularJS ng-repeat not working

Question

I have a very simple AngularJS application where I am trying to display a list of records.

My main index.html code is:

<div id="employeeApp" ng-app='employeeApp' ng-controller='EmployeeController'>
    <div ng-view=""></div>
</div>  

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script> 
<script src="js/controller.js"></script>

The list.html partial view looks like:

div id="listView">
<ul>
    <li name="DataContainer" ng-repeat='employee in employees'>
        <table>
            <tr><td>
                <img ng-src='{{employee.image}}'></img>
            </td></tr>
            <tr><td align="center">
                <span name="Name" class="outputData">
                    <a href="#" ng-click="getEmployeeDetail(employee.id)"><div>{{employee.name}}</div><div>{{employee.title}}</div></a>
                </span>
            </td></tr>
        </table>
    </li>
</ul>

the controller.js code looks like:

var app = angular.module('employeeApp', ['ngRoute']);
app.service('EmployeeService', ['$http', function ($http){

this.getEmployees = function () 
{
    return $http.get(baseURL);
};

this.getEmployee = function (id) 
{
    return $http.get(baseURL + '/' + id);
};}]);

app.config(['$routeProvider', function($routeProvider){    $routeProvider
  .when('/employees', {
      templateUrl: 'partials/list.html'
  })
.when('/employees/:employeeId', {
      templateUrl: 'partials/edit.html'
})
.otherwise({ // default
      redirectTo: '/employees'
});}]);

app.controller('EmployeeController', ['$scope', 'EmployeeService', function ($scope, EmployeeService) {
 $scope.employees = EmployeeService.getEmployees();
 console.log($scope.employees);

 $scope.getEmployeeDetail = function (id) 
 {
    $scope.employeeDetail =  EmployeeService.getEmployee(id);
    console.log($scope.employeeDetail);
 }}]);

My REST service returns me the data that I can see in the browser console but my list is not rendering in the page.

the routing seems to be working fine since I can see list.html getting loaded. However for some reason the the list is showing 2 empty records.

I am wondering i have some basic error either in my html or controller that is breaking the code.

try setting the controller in the route config .when('/employees', { templateUrl: 'partials/list.html', controller: 'EmployeeController' }) — uowzd01
– uowzd01, Commented May 5, 2015 at 2:31
what does the output of console.log($scope.employees); look like? — Joseph Sheedy
– Joseph Sheedy, Commented May 5, 2015 at 2:39
That doesn't help other than that it results in calling my controller twice instead of once. The json output looks like: [{"location":"x","email":"someEmail","image":"1.jpg","name":"John","title":"Director","phone":"1234","id":"0"},........] — Andy
– Andy, Commented May 5, 2015 at 2:42

uowzd01 · Accepted Answer · 2015-05-05 04:51:36Z

1

you controller calling service bit seems strange to me, since EmployeeService returns $http.get(baseURL), I would change the controller code to this:

app.controller('EmployeeController', ['$scope', 'EmployeeService', function ($scope, EmployeeService) {
 EmployeeService.getEmployees().success(function(data){
 $scope.employees = data;
 console.log($scope.employees);
});

edited May 5, 2015 at 4:51

answered May 5, 2015 at 4:46

uowzd01

1,00010 silver badges19 bronze badges

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

2 Comments

Andy Over a year ago

Well that doesn't fix the issue and I expected so. console.log($scope.employees) is showing the correct data in the browser log. However for some reason the view is not finding it. My guess either something is wrong with the view or basic error in controller.

uowzd01 Over a year ago

that's very odd, i basically copy exactly your code and I can see the list is binding fine with $scope.employees. I would recommend you start with something simple, just an array of two strings locally ["value1","value2"], check if list.html can bind?

Collectives™ on Stack Overflow

AngularJS ng-repeat not working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related