2016-06-24 6 views
0

私はここに三つの異なるJSONファイルを解析された私のコード今3つのjsonファイルのデータ全体を読み込んだ後にのみhtmlページを表示するにはどうすればいいですか?

//factory 
 
    app.factory('myapp', ['$http', 
 
      function($http) { 
 
      function getLists() { 
 
        var tab = ['url1', 'url2', 'url3']; 
 
        var list = []; 
 
        for(i=0; i<tab.length; i++){ 
 
        $http.get(tab[i]) 
 
        .then(function(res) { 
 
         list.push(res.data); 
 
        }); 
 
        } 
 
      return list; 
 
     } return { 
 
      getLists: getLists 
 
     }; 
 
]); 
 
    //controller 
 
     $scope.list = myapp.getLists();          

私の挑戦だが、テーブル全体が表示されずに表示されるように、すべてのデータがロードされると、HTMLファイルにこのデータを表示することですjsonファイルの1つがまだロードされていない場合は、ページを開きます。

<tr ng-repeat="d in list"> 
<td>{{d.nm}}</td> 
<td>{{d.cty}}</td> 
<td>{{d.hse}}</td> 
<td>{{d.yrs}}</td> 
</tr> 

私はNG-クロックを試みたが、無駄に、私はあなたがこの

body.is-loading { display: none; } のように非表示にすることにしたいすべてのものにデフォルトのクラスを追加することができますAngularJs 1.3.5

+0

は、ここでは参考にPromise.Allだろうか? (https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) –

答えて

1

を使用しています(または

データがロードされて挿入されるとすぐに、つまりlist.push(res.data);の後に、このクラスが削除されます。これは、ユーザーが情報を取得するとおそらく良いスピナー/ローディングインジケータを追加します。 DOM操作angular.element(body).removeClass('is-loading')を介して、または単にng-classを使用して、このクラスを削除/追加$スコープ/ $ rootScope変数、設定することで、次のいずれかの

<body ng-class='{"is-loading": isLoading }'> 
関連する問題