Javascript 如何从$http请求中获取显示在angular ui.grid中的数据_Javascript_Angularjs_Http Headers

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

javascript angularjs

Javascript 如何从$http请求中获取显示在angular ui.grid中的数据,javascript,angularjs,http-headers,Javascript,Angularjs,Http Headers,好吧，我会尽量简短 <!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

好吧，我会尽量简短

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

我已经学习Angular一段时间了，还有很多东西需要学习，现在我正试图弄清楚如何在一个对我来说完全陌生的服务中使用头来连接端到端，因为我从未做过端到端的集成

下面的代码是从另一个堆栈溢出答案中提供的，我想知道的是如何将它们所拥有的连接到say dataService.js。这对我来说都是新鲜事，所以我试着用最好的方式问这个问题

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


var-app=angular.module（'app'，['ui.grid']）；
app.controller（“gridController”，
[“$scope”、“$attrs”、“$element”、“$compile”、“$http”、“$q”，
函数（$scope、$attrs、$element、$compile、$http、$q）
{
$scope.urlist=“YourSourceUrl”；
函数fnGetList（url）
{
var deferred=$q.deferred（）；
$http.get（url）
.成功（功能（数据）
{
延迟。解析（数据）；
})
.错误（功能（错误消息）
{
警报（错误消息）；
推迟。拒绝；
});
回报。承诺；
};
$scope.GetGridData=函数（url）
{
log（“在GetGridData中：“+”获取数据”）；
//仅测试-如果需要静态测试网格，请取消注释。
//$scope.loadData=([
//        {
//“用户名”：“Joe.Doe”，
//“电子邮件”：“乔。Doe@myWeb.com"
//        },
//        {
//“用户名”：“Jane.Doe”，
//“电子邮件”：“简。Doe@myWeb.com"
//        },
//]);
//返回；
fnGetList（url）.然后（函数（内容）
{
//假设content.data包含格式良好的JSON
if（content.data！==未定义）
{
$scope.loadData=JSON.parse（content.data）；
}
});
};
$scope.gridOptions=
{
数据：“loadData”，
columnDef：
[
{字段：'UserName'，名称：'User'}，
{字段：“电子邮件”，名称：“电子邮件”}
]
};
}
]);

提供自：

我使用的方法是将URL作为AJAX调用传递，然后等待数据返回，然后将JSON数据连接到ng网格。请注意，从URL返回数据时会有延迟，您必须有一个计时器，该计时器将持续检查数据返回是否有效

function setCar(){
$.ajax({
   type: "POST",
   url: '/Test/ConfigConnect.json?details=&car='+car+'&id=1',
   dataType: 'json',
   success: function(data){
        configData = data;
    }
});}

下面还提供了作为javascirpt一部分的计时器函数

    var timer = setInterval(function() {
      $scope.$apply(updatePage);
}, 500);

var updatePage = function() {    
    if (typeof configData !== 'undefined')
    {
        clearInterval(timer);
        $scope.loadData = configData;
    }
};

$scope.urlist=“YourSourceUrl”；感谢您的反馈，很抱歉没有回复：）