1

我有一个检索员工列表的 Web API。现在，当我调用$http服务时，我可以从 WebApi 获取数据，但它既没有填充到表中也没有给出任何错误。

注意：我使用的是角度 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>

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();

});
4

2 回答 2

3

在您的控制器内部，您应该将数据绑定到控制器上下文this，因为您controllerAs在 HTML 上使用控制器时使用语法。理想情况下，当您使用时，controllerAs您不应该$scope在控制器中混合依赖。无论您想在视图上使用该变量进行绑定，请删除$scope依赖项并使用(this)。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-02T07:37:12.207 回答
-1

您应该将代码更改为此。

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

this.getEmployees = function()
{
        var res;
 $http.get(apiUrl + 'employee/all')
   .success(function (response) {
    res = response;});
}
});
于 2016-07-02T07:37:50.843 回答