AngularJS - данные не заполняются в таблице при использовании службы http

У меня есть веб-API, который извлекает список сотрудников. Теперь, когда я звоню в службу $http, я могу получить данные из WebApi, но он не заселен в таблице и не дает никаких ошибок.AngularJS - данные не заполняются в таблице при использовании службы http

Примечание: Я использую угловой v1.5.7

Ниже приведен код, который я написал:

HTML

<body ng-app="employee" ng-controller="EmployeeController as emp"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="col-lg-12"> 
       <div class="table-responsive"> 
        <table class="table table=bordered table-hover"> 
         <thead> 
          <tr> 
           <th>Name <input type="text" class="searchbar" placeholder="Fileter by Name" ng-model="search.FullName" /></th> 
           <th>Department <input type="text" class="searchbar" placeholder="Filter by Department" ng-model="search.Department"/></th> 
           <th>Designation <input type="text" class="searchbar" placeholder="Filter by Designation" ng-model="search.Designation"/></th> 
           <th>DOJ <input type="text" class="searchbar" placeholder="Filter by DOJ" ng-model="search.Doj" /></th> 
           <th>Action</th> 
          </tr> 
         </thead> 
         <tbody> 
          <tr ng-repeat="e in emp.AllEmployees | filter:search:strict"> 
           <td>{{e.FullName}}</td> 
           <td>{{e.Department}}</td> 
           <td>{{e.Designation}}</td> 
           <td>{{e.Doj}}</td> 
           <td><a ng-click="emp.RetrieveDetails(e.Id)">Edit</a>&nbsp;<a ng-click="emp.Delete(e.Id)">Delete</a></td> 
          </tr> 
         </tbody> 
        </table> 
       </div> 
      </div> 
     </div> 
    </div> 
</body>

'use strict'; 

var apiUrl = 'http://localhost:56997/api/'; 
var app = angular.module('employee', []); 

app.service('ngEmployeeService', function($http){ 

    this.getEmployees = function() 
    { 
     var res = $http.get(apiUrl + 'employee/all'); 
     return res; 
    } 

}); 

app.controller('EmployeeController', function($scope, ngEmployeeService){ 

    this.selectedEmployee = {}; 

    function LoadEmployees() 
    { 
     var promise = ngEmployeeService.getEmployees(); 
     promise.then(function(resp){ 
      $scope.AllEmployees = resp.data; 
     }, function(err){ 
      alert('Call Failed'); 
     }); 
    }; 

    LoadEmployees(); 

});

источник

2016-07-02 user2988458

Внутри вашего контроллера вы должны привязать данные к контексту контроллера this, поскольку вы используете синтаксис controllerAs при использовании контроллера по HTML. В идеале, когда вы используете controllerAs, вы не должны смешивать зависимость $scope в контроллере. Устраните зависимость $scope и используйте self (здесь), где бы вы не захотели использовать эту переменную в представлении для привязки.

Код

app.controller('EmployeeController', function($scope, ngEmployeeService){ 
    var self = this; 
    self.selectedEmployee = {}; 

    function LoadEmployees() 
    { 
     var promise = ngEmployeeService.getEmployees(); 
     promise.then(function(resp){ 
      self.AllEmployees = resp.data; 
     }, function(err){ 
      alert('Call Failed'); 
     }); 
    }; 
    LoadEmployees(); 

});

источник

2016-07-02 07:37:12

Это сработало. Большое спасибо. – user2988458

-1

Вы должны изменить свой код к этому.

app.service('ngEmployeeService', function($http){ 

this.getEmployees = function() 
{ 
     var res; 
$http.get(apiUrl + 'employee/all') 
    .success(function (response) { 
    res = response;}); 
} 
});

источник

2016-07-02 07:37:50

он не вернет данные, поскольку вы использовали обратный вызов здесь. В идеале он должен вернуть обещание, подобное OP, которое уже делает это –

AngularJS - данные не заполняются в таблице при использовании службы http

ответ

Смежные вопросы