javascript - 从 'for loop' 返回响应数据 - AngularJS

Question

对于 Angular 来说相当陌生。我有一个服务，其目的是从 JSON 文件获取信息，迭代每个对象，以便我可以从 Controller 访问数据。我可以从 $http 请求访问 JSON 数据，但不能从服务内的 for 循环访问 JSON 数据。

这是循环遍历 AngularJS 中的项目的最佳方式吗？如果是，我如何从 Controller 访问和显示此信息？

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返回promise并在controller中解析。如下所示:

工厂

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

return factory;
}]);

Controller

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 属性，例如 $scope.fxRateData = response.data。 fxrate，然后在 html 中按照您想要的方式呈现它。

仅作为示例:

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