2016-07-30 85 views
1

我使用角度1.5.5與ui路由器0.2.14。我有要顯示的員工列表視圖。 EmployeeList的模板如下:angularjs對象列表不綁定到ng重複

var app = angular.module('app', ['ui.router']); 
 
app.config(function ($urlRouterProvider, $stateProvider, $httpProvider) { 
 
    $urlRouterProvider.otherwise('/'); 
 
    $stateProvider.state('employeeList', { 
 
     url: '/List', 
 
     templateUrl: '../../Templates/EmployeeList.html', 
 
     controller: 'EmployeeListController', 
 
     resolve: { 
 
      employeeListRs: function (dataService) { 
 
       var employeeListRq = getEmployeeListRqInit(); 
 
       return dataService.callApi('GetEmployees', 'post', [employeeListRq]) 
 
        .then(function (data) { return data.data; }); 
 
      }, 
 
      employeeListRq: function(){ 
 
       return getEmployeeListRqInit(); 
 
      }, 
 
      greeting: function ($q, $timeout) { 
 
       var deferred = $q.defer(); 
 
       $timeout(function() { 
 
        deferred.resolve('Hello!'); 
 
       }, 1000); 
 
       return deferred.promise; 
 
      } 
 
     } 
 
    }); 
 
    $stateProvider.state('default', { 
 
     url: '/', 
 
     //templateUrl: '../../Templates/EmployeeList.html', 
 
     controller: 'defaultController' 
 
    }); 
 
    $httpProvider.defaults.headers.common = {}; 
 
    $httpProvider.defaults.headers.post = {}; 
 
    $httpProvider.defaults.headers.put = {}; 
 
    $httpProvider.defaults.headers.patch = {}; 
 

 
    var getEmployeeListRqInit = function() { 
 
     return { 
 
      PageNumber: 1, 
 
      PageSize: 10, 
 
      SessionId: "123" 
 
     }; 
 
    } 
 
});

DataService是否是包裝到原服務:

<table class="employeeListContainer"> 
 
    <tr ng-repeat="employee in employees"> 
 
     <td> 
 
      <a ng-bind="employee.EmployeeId" class="employeeId"></a> 
 
      <!--ui-sref="employeeDetails{ employeeId: employee.EmployeeId }"--> 
 
     </td> 
 
     <td ng-bind="employee.FirstName"></td> 
 
     <td ng-bind="employee.LastName"></td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="3" class="paging"> 
 
      <button ng-disabled="!IsPrevButtonEnabled" ng-click="prevPage()" class="prev-next">&lt;</button>&nbsp; 
 
      <span ng-bind="PageNumber"></span>&nbsp; 
 
      <button ng-disabled="!IsNextButtonEnabled" ng-click="nextPage()" class="prev-next">&gt;</button> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="3" class="paging"> 
 
      <span ng-bind="ErrorMessage" ng-show="IsError"></span> 
 
     </td> 
 
    </tr> 
 
</table>

如下我已經配置應用程序$ http.post調用。控制器代碼如下:

app.controller('EmployeeListController', function ($scope, employeeListRq, employeeListRs, greeting) { 
 
    $scope.PageNumber = employeeListRq.PageNumber; 
 
    $scope.PageSize = employeeListRq.PageSize; 
 
    $scope.IsError = !employeeListRs.IsSuccess; 
 
    $scope.TotalCount = (employeeListRs.EmployeeList == null) ? 0 : employeeListRs.EmployeeList.TotalCount; 
 
    $scope.employees = (employeeListRs.EmployeeList == null) ? null : employeeListRs.EmployeeList.Employees; 
 
    
 
    if ($scope.employees = null) return 1; 
 
    var remainder = $scope.TotalCount % $scope.PageSize; 
 
    var pageNumber = Math.floor($scope.TotalCount/$scope.PageSize); 
 
    var lastPageNumber = remainder > 0 ? pageNumber + 1 : pageNumber; 
 
    $scope.IsNextButtonEnabled = $scope.PageNumber != lastPageNumber; 
 
    $scope.IsPrevButtonEnabled = $scope.PageNumber != 1; 
 

 
    $scope.IsLoading = false; 
 
    $scope.ErrorMessage = employeeListRs.IsSuccess ? '' : employeeListRs.ErrorMessage; 
 
});

我看到而調試在鉻該$ scope.employees設置爲包含所有適當的字段和值10級的對象的陣列。此外,IsPrevButtonEnabled和IsNextButtonEnabled設置完美。綁定也反映在UI上,非常完美。 但我沒有看到包含員工列表的表格。任何關於我失蹤的建議?

注意:控制檯上沒有任何錯誤。

回答

0

有幾件事情,你可以嘗試:

(1)不是說你是不正確的,但將數據綁定的首選方式是使用表達式。所以,取而代之的是:

<td ng-bind="employee.FirstName"></td> 

試試這個:

<td>{{employee.FirstName}}</td> 

(2)這行看起來在你的控制器可疑:

if ($scope.employees = null) return 1; 

它看起來像你分配一個空值到$ scope.employees而不是檢查null。當我們想要檢查是否存在時,我/我的團隊嘗試使用angular.isDefined($ scope.employees)。

你想用那條線完成什麼?

(3)這看起來比別人怎樣我使用的服務,以及如何我看到使用它們有一點不同:

resolve: { 
     employeeListRs: function (dataService) 

它看起來對我說employeeListRs返回一個承諾。

我通常所做的是從控制器內部調用服務(我的角度服務,然後調用$ http服務),然後處理響應(預期和錯誤響應)。從那裏我將數據推送到控制器的模型中。我還沒有將服務調用混入我的狀態機 - 我讓控制器進行服務調用。

(4)這個css類是什麼 - employeeListContainer?那裏可以隱藏你的桌子嗎?你可能也想分享你的html和css。

+0

你是個天才!這是真的,他們說。錯字可以造成巨大的差異。經驗教訓:)謝謝! – YSBoom