ng-repeat showing empty table rows

Question

I getting empty tags when I am using ng-repeat. The number of s is equal to the number of records returned from the service/api. I have checked in ng-inspector scope has proper records. Can anybody point where I am doing it wrong?

Index.html looks like:-



  
    
    Test Admin
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  
  
    

    
   
      
      
      
              
                  
              
            
            Online Judgments - Admin Panel
            

            
            
              
                    Logout
              
            
        
      

      
      
      
          
              
              

                  
                  Admin Menu                    
                  
                      
                          
                          Add Subscriber
                      
                  

                  
                      
                          
                          Manage Subscribers
                      
                                    
              
              
          
      
      

      
      
      
      

      

      
      
      
          
              Test admin

View looks like:


    

         Manage Subscriber
        
                Search
                
                    
                
            
         

            
                
                    
                        
                            User Name
                            Name
                            Password
                            Start Date
                            End Date
                            Mobile
                            Address
                            Phone
                            
                        
                    
                    
                        
                            {{user.UserName}}
                            {{user.FirstName + ' ' + user.LastName }}
                            {{user.Password}}
                            {{user.StartDate | date:'dd/MM/yyyy'}}
                            {{user.EndDate | date:'dd/MM/yyyy'}}
                            {{user.Mobile}}
                            
                                {{ user.Address1 + ' ' + 
                                user.Address2 + ' ' + 
                                user.Address3 + ' ' + 
                                user.State +  ' ' + 
                                user.PinCode + ' ' + 
                                user.Country }}
                            
                            {{user.StdCode + ' ' + user.Phone}}

app.js looks like:

angular
  .module('ojadminuiApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch',
    'ui.bootstrap',
    'toastr',
    'jkuri.datepicker'
  ])
  .constant('BASE_URL', 'http://localhost/OnlineAdmin.API/api/')
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/manageSubscriber.html',
        controller: 'ManagesubscriberCtrl'
      })
      .when('/AddSubscriber', {
        templateUrl: 'views/addSubscriber.html',
        controller: 'AddsubscriberCtrl'
      })
      .when('/AddSubscriber/:id', {
        templateUrl: 'views/addSubscriber.html',
        controller: 'AddsubscriberCtrl'
      })
      .when('/ViewSubscriber/:id',{
        templateUrl : 'views/viewSubscriber.html',
        controller: 'AddsubscriberCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

controller looks like:

angular.module('ojadminuiApp')
  .controller('ManagesubscriberCtrl', function ($scope, userService) {
    $scope.Users = userService.query();
  });

Output from service/api looks like

[
  {
    "userId": 1033,
    "userName": "test@gmail.com",
    "firstName": "testfirst",
    "password": "testpass1",
    "lastName": "tstlast",
    "startDate": "2016-08-02T00:00:00",
    "endDate": "2018-02-24T00:00:00",
    "createdDate": "2016-02-08T19:18:24.357",
    "updatedDate": "2016-02-08T19:45:11.373",
    "mobile": "939393993",
    "email": "test@gmail.com",
    "address1": "Ad1",
    "address2": "AD2",
    "address3": "AD3",
    "country": "tstctry",
    "state": "tststate",
    "pincode": "100011",
    "stdCode": "080",
    "phone": "309333030"
  }
]

My factory looks like:-

angular.module('ojadminuiApp')
  .factory('userService', function ($resource, BASE_URL) {
      return $resource(BASE_URL +'users/:id', null,
    {
        'update': { method:'PUT' , params: {id: '@id'}}
    });
  });

Pankaj Parkar · Accepted Answer

You had a typo while binding value to view.

You should follow cammel case instead of title case like

{{user.firstName}}

To resolve above binding field issue for all fields, as accessing object with key is case sensitive.

ng-repeat showing empty table rows

Answers (2)

Related Questions