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

时间：2015-06-19 04:54:34

标签： angularjs rest view binding

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

来源

<!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

1 个答案:

答案 0 :(得分：2)

最终{“actualPrice”：10，“按钮”：“检查可用性”，“内容”：“6个月5英镑，6个月每月10英镑”，“描述”：“光纤宽带”，“ 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
  }
]

您的服务正常运行，因此请修改控制器部分