繁体   English   中英

如何从$ http请求获取以角度ui.grid显示的数据

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

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

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

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

我尝试将gridOptions.data设置为一个数组,并在$ http调用的success函数中,我将用于gridOptions.data的数组设置为返回的数据。

网格什么都没有显示。

有任何想法吗?

我要将罗马的答案标记为正确,但由于我指定我使用的是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一起只是在早期煎炸我的大脑......

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

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

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

干杯。

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

好吧,我将保持尽可能短的时间。 我已经学习了Angular了一段时间,但我仍然需要学习很多东西,现在我正试图找出如何使用服务中的标头端对端连接,这对我来说是全新的从未完成端到端集成。 下面的代码是从另一个堆栈溢出答案提供的,我想知道的是如何将它们与dataService.js连接起来 ...

2 Angular ui.grid获取嵌套行

我已经尝试了最近几个小时来让ui.grid在一行内显示嵌套表。 每行可以没有一个,一个或多个产品,但是我无法显示我的产品。 我通过ajax请求json文件,但出于演示目的,我将其设置为静态。 这是拔毛器http://plnkr.co/edit/aXgXFZQL4xgVtTNH3y ...

6 在 UI.Grid (Angular) 中使用外部过滤没有结果时无法清除数据

我正在使用angular-ui-grid ,它确实是一个强大的库。 我正在尝试使用 externalFiltering 选项来进行即时过滤。 我遵循了教程,但是当搜索没有返回任何数据时,我无法清除网格数据。 出于测试目的,我尝试像这样清空数据: 它有效但不是真正干净的代码:/如果我没有清除数据 ...

7 如何从Node.js HTTP请求取回数据?

我的目的超出了这个简单的请求,但是我试图发出一个http请求并获得响应。 我已经从nodejs.org http请求中复制了代码以尝试发出http请求。 我已经修改了端点和REST动词。 该代码检索页面并将此消息写入控制台(我的快速服务器输出的控制台),然后挂起。 它显示“没有更 ...

9 使用 ['ui.grid'] 后未加载 Angular js 应用程序

我是 angular js 的新手。 我已经下载了 ui-grid.js 和 ui-grid.css 来在我们现有的 angular js 项目中实现 ng-grid。 我在 Index.html 中添加了它们的路径,如下所示。 但是当我尝试在像下面这样的 tPController.js 文件中 ...

10 角度ui.grid分页与分页

我是ui.grid的新手,并使用该教程获取包含大量数据的网格。 我的版本是3.0.0.RC16,我从凉亭安装angular-ui-grid 我想使用分页但是会出错。 有2个关于分页的教程称为分页和一个分页 : http://ui-grid.info/docs/#/tuto ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM