1

従業員のリストを取得する Web API があります。サービスを呼び出すと$http、WebApi からデータを取得できますが、テーブルに入力されず、エラーも発生しません。

注： Angular 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

HTMLでコントローラーを使用しているときに構文を使用してthisいるため、コントローラー内でデータをコントローラーコンテキストにバインドする必要があります。controllerAs理想的には、使用しているときは、コントローラーに依存関係をcontrollerAs混在させないでください。依存関係を$scope削除し、バインディングのためにビューでその変数を使用したい場合はいつでも (this) を使用してください。$scopeself

コード

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 に答える