'forループ'から応答データを返す - AngularJS

Question

Angularに合理的に新しい。 JSONファイルから情報を取得し、各オブジェクトを繰り返し処理するという目的を持っているため、コントローラからデータにアクセスできます。 $httpリクエストからJSONデータにアクセスできますが、サービス内のforループのJSONデータにはアクセスできません。

これはAngularJS内のアイテムをループする最も良い方法ですか、そうであればコントローラからこの情報にアクセスして表示するにはどうすればよいですか？

app.factory('fxRate', ['$http', '$q', function($http, $q){ 

var factory = {}; 

factory.getFx = function() { 
    var deferred = $q.defer(); 

    $http.get('../json/mcfx.json') 
     .then(
      function(response){ 

       var d, i; 

       var rateData = response.data.fxrate; 

       for (var i in rateData) { 
        var fx = rateData[i].usdToEur; 
        var fxDate = rateData[i].date; 
       } 
       deferred.resolve(response.data); 
      }, 
      function(errResponse){ 
       deferred.reject(errResponse.data); 
      } 
     ) 

    return deferred.promise; 

} 

return factory; 

}]); 

---

app.controller('dashboard', ['$scope', 'fxRate', function($scope, fxRate){ 

$scope.dailyFx = function() { 
    fxRate.getFx().then(function(data){ 
     console.log(data) 
    }); 
} 

$scope.dailyFx(); 

}]) 

Answer 1

、それを簡単にfactory\serviceから約束を返し、controllerで解決します。以下のように ：

工場

app.factory('fxRate', ['$http', function($http){ 
var factory = {}; 
factory.getFx = function() { 
    return $http.get('../json/mcfx.json'); 
} 

return factory; 
}]); 

コントローラ

app.controller('dashboard', ['$scope', 'fxRate', function($scope, fxRate){ 
$scope.dailyFx = function() { 
    fxRate.getFx().then(function(resonse) { 
     console.log(resonse.data) 
     //handle resonse\data, or assign to some $scope property. 
     var rateData = response.data.fxrate; 
     for (var i in rateData) { 
      var fx = rateData[i].usdToEur; 
      var fxDate = rateData[i].date; 
     } 
    }); 
} 

$scope.dailyFx(); 
}]) 

view\htmlでこのデータを表示するには、あなたは$scope.fxRateData = response.data.fxrateのように、いくつかの$scopeプロパティにこれを割り当てる必要があり、その後、 htmlでそれを望むようにレンダリングします。唯一例えば

：私は、コントローラとは別の機能を維持したい場合けれども

<div ng-repeat="fxrate in fxRateData track by $index"> 
    <span>{{fxrate.usdToEur}}</span> 
    <span>{{fxrate.date}}</span> 
</div>