Question

我有一个很长的json，每个都来自不同的架构。我确实推进了以便将它们全部放在一个json中 - 这很有效。知道我想为所有这些使用控制器并将其显示在屏幕上。

我的索引

<!DOCTYPE html>
<html ng-app="showFrozen">
 <head>
 <title>frozen</title>
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
 </head>
 <body ng-controller="showFrozenCtrl">
 <tbody>
 <div ng-repeat="themes in showFrozenController.themes" ng-show="$first">
  <h2>{{themes.theme}}</h2>
 <span>for age: </span>
 <p>{{themes.age}}</p>
 <span>description: </span>
 <p>{{themes.description}}</p>
  <p>{{themes.description_more}}</p>
 <img ng-src="{{themes.image}}" width="170" height="170">
 </div>

 </table>
    <script src="js/lib/angular/angular.min.js"></script>
    <script src="js/showFrozenController.js"></script>
 </body>
 </html>

我的控制器

var showFrozen = angular.module('showFrozen',[]);
showFrozen.filter("allItems", function() {
    return function(frozen) {
        var resultArr = [];
        angular.forEach(frozen,function(item) {
                resultArr.push(item);
        });
        return resultArr;
    };
});
var model = {};

showFrozen.run(function($http) {
    $http.get("http://localhost:3000/frozen").success(function(data){
       console.log(data);
        model.frozen = data;
    });
});
showFrozen.controller('showFrozenCtrl',function($scope) {
    $scope.showFrozenController = model;
});

所以我没有得到任何输出 - 但我在控制台中看到json，我正在附加图像。

Answer 1

在您的控制器模型中未定义。将HTTP调用移动到控制器，并在成功时将scope.showFrozenController分配给数据

Answer 2

您需要在控制器内发出$http请求。

showFrozen.controller('showFrozenCtrl',function($scope, $http) {
    $http.get("http://localhost:3000/frozen").success(function(data){
        console.log(data);
        $scope.model = data;
    });
});

这是因为当您尝试在模板（html）中打印项目时，任何{{ }}块内实际访问的内容都是您的$scope对象。因此，要使模板可以使用数据，您必须将其存储在$scope上。

阅读this blog post

Answer 3

showFrozen.factory('frozenDataSrv',function($http) {
    return {
        getFrozenData: getFrozenData
    };

    function getFrozenData() {
        return $http.get("http://localhost:3000/frozen")
            .then(getFrozenDataComplete)
            .catch(getFrozenDataFailed);

        function getFrozenDataComplete(response) {
            return response.data.results;
        }

        function getFrozenDataFailed(error) {
            logger.error('XHR Failed for getFrozenData.' + error.data);
        }
    }

    });

showFrozen.controller('showFrozenCtrl',function($scope, frozenDataSrv) {
    frozenDataSrv.getFrozenData()
     .then(function(response){
        console.log(response)
  })
});

来自不同架构的多个数据，角度显示

3 个答案: