来自不同模式的多个数据，角度显示

我有一个非常长的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在控制台中，我将一个图像。

来源

2016-06-13 user3488862

在控制器型号是不确定的。将HTTP调用移动到您的控制器，并成功将scope.showFrozenController分配给数据

来源

2016-06-13 15:58:07 avim101

感谢您的回答的读，但我不明白是怎么回事未定义如果我看到了JSON在控制台... – user3488862

而且这不是好的做法做HTTP调用在应用程序运行。它更好地使用服务来处理API调用。应用程序运行通常是在应用程序加载之前使用服务。这里的角度调用顺序：1. app.config（）//只提供可以注入2.app.run（）//服务可以注入3.指令的编译功能（如果它们在dom中找到）4.应用程序。控制器（）5.指令的链接功能（再次，如果找到） – avim101

那么我需要使用什么，如果我得到一个空的JSON？对不起，所有的问题，我是新的角度和没有很多练习在节点 – user3488862

您需要在控制器内部发出$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

来源

2016-06-13 15:58:56

仍然不适合我 – user3488862

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) 
    }) 
});

来源

2016-06-14 07:06:13 avim101

我得到undefined，我没有得到任何回应 – user3488862

创建一个代码与你的代码 – avim101

你是什么进入getFrozenDataComplete？ – avim101

来自不同模式的多个数据，角度显示

回答

相关问题