I have a Web API which retrieves list of employees. Now when I call to $http
service, I can get data from WebApi but it neither populated in table nor gives any error.
Note: I am using angular v1.5.7
Below is the code I have written:
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> <a ng-click="emp.Delete(e.Id)">Delete</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
JS
'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();
});
Inside your controller you should bind data to controller context this
as you are using controllerAs
syntax while using controller on HTML. Ideally when you are using controllerAs
you shouldn't be mixing $scope
dependency in controller. Do remove $scope
dependency and use self
(this) wherever you want to use that variable on view for binding.
Code
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();
});