AngularJS

Question

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

注意：我正在使用angularv1.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();

});

Answer 1

在您的控制器中，您应该将数据绑定到控制器上下文 this，因为您在 HTML 上使用控制器时使用 controllerAs 语法。理想情况下，当您使用 controllerAs 时，您不应该在控制器中混合 $scope 依赖项。删除 $scope 依赖项并在任何你想在视图上使用该变量进行绑定的地方使用 self(this) 。

代码

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

});

Answer 2

您应该将代码更改为这个。

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

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

AngularJS - 使用 http 服务时数据未填充到 table

AngularJS - Data is not populating in table while using http service

angularjs-service

angularjs-scope

angularjs-controller

angularjs-controlleras