$ httpリクエスト継続からの角度ui.gridにデータを表示する方法

これはできるだけ短くしておきます。

私はちょっとAngularを勉強していましたが、今でも多くのことを学ぶ必要があります。今は完全に新しいサービスのヘッダーとエンド・ツー・エンドの接続方法を理解しようとしています私は終わりから終わりまでの統合を決してしなかった。

以下のコードは、別のスタックオーバーフローの回答から提供されています。私が知りたいことは、どのようにして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": "[email protected]" 
        //  }, 
        //  { 
        //   "UserName": "Jane.Doe", 
        //   "Email": "[email protected]" 
        //  }, 
        //]); 
        //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>

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

出典

2016-04-14 Dr Mints

$ scope.urlList = "YourSourceUrl"; <==使用しているURLはありますか？それは正しく設定されていますか？郵便配達またはその他のツールを使ってデータを返すことができますか？ –

私が使用する方法は、AJAX呼び出しとしてURLを渡した後、私はNG-グリッドにJSONデータを接続した後に戻って取得するデータを待つことです。 URLからデータを取得するのに遅延があり、データの戻りが有効であることを確認し続けるタイマーが必要になることに注意してください。

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

また、javascalptの一部であるタイマー機能も示します。

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

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

出典

2016-04-14 22:34:48 user4534599

私はフィードバックに感謝して、申し訳ありません:) –

$ httpリクエスト継続からの角度ui.gridにデータを表示する方法

答えて

関連する問題