Question

我是第一次在应用程序上尝试Angular ui-grid，但无法按预期工作。我创建了一个示例JSON数据进行测试，它显示了包含所有数据的网格。但是当我决定使用我的数据库中的真实数据进行尝试时，它会显示一个没有行和列的空网格内容。

HTML

<div ui-grid="gridOptions" ui-grid-pagination style="width: 100%; height: 400px"></div>

App.js

(function() {
    angular.module('app').controller('app.views.users.index', [
        '$scope', '$modal', 'abp.services.app.user',
        function ($scope, $modal, userService) {

            $scope.usersList = [];

            $scope.gridOptions = {
                //grid pagination
                paginationPageSizes: [10, 25, 50, 75],
                paginationPageSize: 10,
                enableSorting: true,
                //enabling filtering
                enableFiltering: true,
                //column definations
                //we can specify sorting mechnism also
                ColumnDefs: [
                    { name: 'Username', field: 'username' },
                    { name: 'Full Name', field: 'fullName' },
                    { name: 'Email Address', field: 'emailAddress' },
                    { name: 'Active' ,field: 'isActive', enableFiltering: false }
                ],
            };
            //api that is called every time
            // when data is modified on grid for sorting
            $scope.gridOptions.onRegisterApi = function (gridApi) {
                $scope.gridApi = gridApi;
            }


            function getUsers() {
                userService.getUsers({}).success(function (result) {
                    $scope.usersList = result.items;
                });
            }
            //Bind data to grid
            $scope.gridOptions.data = $scope.usersList;

        }
    ]);
})();

是的，返回的数组对象中包含数据。我通过使用一个简单的html表来显示数据和显示的数据。请问我错过了什么？

Answer 1

问题是GetUsers()有异步回调，所以程序在执行回调之前继续到下一行 - $scope.gridOptions.data = $scope.usersList。因此没有数据绑定。

您需要做的是在gridOptions.data函数中设置success：

function getUsers() {
  userService.getUsers({}).success(function (result) {
    $scope.usersList = result.items;
    //Bind data to grid
    $scope.gridOptions.data = $scope.usersList;
  });
}

Angular ui-grid显示没有行的网格容器＆amp;列

1 个答案: