获得响应但视图未更新 - AngularJS

Question

我正在尝试从 url 获取响应并填充到视图中，但我没有看到视图得到更新。帮我解决这个问题。谢谢

来源

<!DOCTYPE html>
<html ng-app="myModule">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-init="priceList='promo03'">
<div ng-controller="PricingController" >
    <div ng-repeat="item in finalList track by $index">
    <ul>
        <li>Actual Price: {{item.actualPrice}}</li>
        <li>Button: {{item.button}}</li>
        <li>Content: {{item.content}}</li>
        <li>Description: {{item.description}}</li>
        <li>Discounted Price: {{item.discountedPrice}}</li>
    </ul>
    </div>
</div>
<script>
var myModule = angular.module('myModule',[]);
myModule.service('bannerService', ['$http', function ($http) {
    this.getBannerList = function (id, success) {
        invokeHttp('https://poctest1.firebaseio.com/Pricing/' + id + '.json', success);
    }
    var invokeHttp = function (url, callback) {
        var value = $http({ method: 'GET', url: url }).
            success(function (data) {
                callback(data);
            }).error(function () {
                callback(null);
            });
            return value;
    };
}]);

myModule.controller('PricingController',['$scope','bannerService', function($scope, bannerService){
    $scope.finalList = [];
    var finalArray = [];
    $scope.splitArray= function(){
        $scope.array = $scope.priceList.split(",");
    };
    $scope.callService = function(){
        for(i = 0; i < $scope.array.length; i++){
            //console.log(bannerSupportService.fetch($scope.array[i])); 
            bannerService.getBannerList($scope.array[i], function(banner){
            if(banner != null){
                finalArray.push(angular.toJson(banner));
            }   
            if(i == $scope.array.length){
                $scope.finalList = finalArray;
                console.log('Final'+$scope.finalList);
            }
        });
        }
    };

    $scope.splitArray();
    $scope.callService();

}]);
</script>
</body>
</html>

控制台输出

Final{"actualPrice":10,"button":"Check Availability","content":"£5 for 6 months, £10 a month for further 6","description":"Fiber broadband","discountedPrice":5}

HTML 实际输出

Actual Price:
Button:
Content:
Description:
Discounted Price:

HTML 预期输出

Actual Price: 10
Button: Check Availability
Content: £5 for 6 months, £10 a month for further 6
Description: Fiber broadband
Discounted Price: 5

Answer 1

Final{"actualPrice":10,"button":"Check Availability","content":"£5 for 6 months, £10 a month for further 6","description":"Fiber broadband","discountedPrice":5}

此输出表示对象而不是数组，假设您等待数组。因此 ng-repeat 什么都不打印。应该是这样的：

[
  {
    "actualPrice": 10,
    "button": "Check Availability",
    "content": "£5 for 6 months, £10 a month for further 6",
    "description": "Fiber broadband",
    "discountedPrice": 5
  }
]

您的服务工作正常，请修复控制器部分

获得响应但视图未更新 - AngularJS

Getting response but view is not updating - AngularJS

rest

binding

view

angularjs

来源

控制台输出

HTML 实际输出

HTML 预期输出