如何从 $http 请求中获取数据以显示在 angular ui.grid 中

Question

我正在使用 Typescript 和 AngularJS。我有一个包含 ui.grid 指令的模板。

显示网格，稍后 $http 请求获取我希望网格包含的数据。

我尝试将 gridOptions.data 设置为数组，在 $http 调用的成功函数中，我将用于 gridOptions.data 的数组设置为返回的数据。

网格没有任何显示。

有什么想法吗？

我要将 Roman 的答案标记为正确，但由于我指定我使用的是 Typescript，因此我将展示我的解决方案以确保完整性：

export class MyController  {
    constructor ( ) {
        //...code to setup grid, col defs, data as an empty array, etc...
        var myDataPromise = this.myHttpService.getDataForGrid();

        myDataPromise.then((data) => {
            this.gridOptions.data = data["value"];
        },(reason) => { },(update) => { });
    }
}

我的模板：

<div ui-grid='myController.gridOptions'></div>

我不确定为什么我的原始代码不能正常工作...我认为 Typescript 和 Angular 一起让我的大脑很早就炸了...

Answer 1

尝试以下操作：

<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
</head>
<body ng-app="app">
    <div ng-controller="gridController">
        <!-- Initialise the grid with ng-init call -->
        <div ui-grid="gridOptions" ng-init="GetGridData(urlList)">
        </div>
    </div>

    <script src="Scripts/ng/angular.min.js"></script>
    <script src="Scripts/ng-grid/ui-grid.min.js"></script>
    <link rel="Stylesheet" type="text/css" href="Scripts/ng-grid/ui-rid.min.css" />

    <script type="text/javascript">

        var app = angular.module('app', ['ui.grid']);

        app.controller("gridController",
            ["$scope", "$attrs", "$element", "$compile", "$http", "$q",
            function ($scope, $attrs, $element, $compile, $http, $q)
            {
                $scope.urlList = "YourSourceUrl";

                function fnGetList(url)
                {
                    var deferred = $q.defer();
                    $http.get(url)
                        .success(function (data)
                        {
                            deferred.resolve(data);
                        })
                        .error(function (errorMessage)
                        {
                            alert(errorMessage);
                            deferred.reject;
                        });
                    return deferred.promise;
                };

                $scope.GetGridData = function (url)
                {
                    console.log("In GetGridData: " + "Getting the data");

                    //  Test Only - un-comment if you need to test the grid statically.

                    //$scope.loadData = ([
                    //        {
                    //            "UserName": "Joe.Doe",
                    //            "Email": "Joe.Doe@myWeb.com"
                    //        },
                    //        {
                    //            "UserName": "Jane.Doe",
                    //            "Email": "Jane.Doe@myWeb.com"
                    //        },
                    //]);
                    //return;

                    fnGetList(url).then(function (content)
                    {
                        //  Assuming your content.data contains a well-formed JSON

                        if (content.data !== undefined)
                        {
                            $scope.loadData = JSON.parse(content.data);
                        }
                    });
                };

                $scope.gridOptions =
                {
                    data: 'loadData',
                    columnDef:
                        [
                            { field: 'UserName', name: 'User' },
                            { field: 'Email', name: 'e-mail' }
                        ]
                };

            }
        ]);
</script>

</body>

如果您不想立即填充网格，请删除对

的调用

ng-init

并在其他事件上调用相关函数。

希望在不了解您的具体问题的情况下，这会指导您找到解决方案。

干杯。

如何从 $http 请求中获取数据以显示在 angular ui.grid 中

How do I get data to show up in angular ui.grid from an $http request

angularjs

typescript

angular-ui-grid