Question

我使用角度1.5.5与ui路由器0.2.14。我有要显示的员工列表的视图。 EmployeeList模板如下：

＆＃13;

    <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>

＆＃13;

我已按如下方式配置应用：

＆＃13;

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"
        };
    }
});

＆＃13;

dataService是一个包装到原始$ http.post调用的服务。控制器代码如下：

＆＃13;

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

＆＃13;

我在chrome中调试时看到$ scope.employees被设置为包含10个对象的数组，所有对象都具有适当的字段和值。 IsPrevButtonEnabled和IsNextButtonEnabled也完美设置。绑定也完全反映在UI上。但我没有看到包含员工名单的表格。关于我缺少什么的任何建议？

注意：我在控制台上没有收到任何错误。

Answer 1

您可以尝试一些事项：

（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。

angularjs对象列表不绑定到ng-repeat

1 个答案: