我遇到了使用ng-repeat指令渲染json数据的angular.js。我目前正在使用Django REST Framework。请参阅下面的源代码。感谢。
user$ curl localhost:8000/posts/ -i
HTTP/1.0 200 OK
Date: Sat, 02 Aug 2014 15:37:27 GMT
Server: WSGIServer/0.1 Python/2.7.8
Vary: Accept, Cookie
X-Frame-Options: SAMEORIGIN
Content-Type: application/json
Allow: GET, POST, HEAD, OPTIONS
[{"id": 1, "title": "First Post", "content": "hello world, my first post"}, {"id": 2, "title": "this is my second post via POST request", "content": "should return 201 Created"}, {"id": 3, "title": "third post", "content": "why not working"}]%
(function(){
var app = angular.module("PostApp", []);
app.controller("PostCtrl", ["$scope", "$http", function($scope, $http){
var store = this;
$http.get('/posts/')
.success(function(data){
$scope.datas = data;
console.log(data[0]);
});
}]);
})();
Object {id: 1, title: "First Post", content: "hello world, my first post"}
我实际上不确定为什么这是一个“对象”。
<html ng-app="PostApp">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
{% load staticfiles %}
<title>Angular.js with Django</title>
</head>
<body ng-controller="PostCtrl as pc">
<h1>Welcome to Angular.JS</h1>
<div ng-repeat="data in datas">
<h3>{{ data.title }}</h3>
</div>
<script src="{% static 'posts/angular.js' %}"></script>
<script src="{% static 'posts/app.js' %}"></script>
</body>
</html>
它没有呈现{{data.title}}，（h3元素为空）
<html ng-app="PostApp" class="ng-scope"><head><style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\:form{display:block;}.ng-animate-block-transitions{transition:0s all!important;-webkit-transition:0s all!important;}.ng-hide-add-active,.ng-hide-remove{display:block!important;}</style>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Angular.js with Django</title>
</head>
<body ng-controller="PostCtrl as pc" class="ng-scope">
<h1>Welcome to Angular.JS</h1>
<!-- ngRepeat: data in datas --><div ng-repeat="data in datas" class="ng-scope">
<h3></h3>
</div><!-- end ngRepeat: data in datas --><div ng-repeat="data in datas" class="ng-scope">
<h3></h3>
</div><!-- end ngRepeat: data in datas --><div ng-repeat="data in datas" class="ng-scope">
<h3></h3>
</div><!-- end ngRepeat: data in datas -->
<script src="/static/posts/angular.js"></script>
<script src="/static/posts/app.js"></script>
</body></html>
我应该如何更改以在视图中呈现适当的json数据。在这种情况下{{data.title}}？
答案 0 :(得分：1)
你的角度代码看起来很好。我认为你遇到的问题是这是一个Django模板，它也使用花括号。当Django处理模板时，它会在这些大括号中查找自己的变量，而不是找到一个，用什么都替换它们。
有一些解决方案。一个简单的模板标记名为Verbatim，可以在模板中执行此操作：
{%load verbatim%}
{%verbatim%}
<h3>{{ data.title }}</h3>
{%endverbatim%}
注意：从django 1.5开始逐字逐句。
答案 1 :(得分：0)
测试了返回的数据，它在我的测试中运行正常，但我没有使用$http。但根据this帖子，您可能需要在调用$http.get()方法之前先初始化$ scope变量，因为它返回的$promise无法迭代。
试试这个
(function(){
var app = angular.module("PostApp", []);
app.controller("PostCtrl", ["$scope", "$http", function($scope, $http){
var store = this;
$scope.datas = [];
$http.get('/posts/')
.success(function(data){
$scope.datas = data;
console.log(data[0]);
});
}]);
})();
答案 2 :(得分：0)
<强> app.js
(function(){
var app = angular.module("PostApp[]).config(function($interpolateProvider{
$interpolateProvider.startSymbol('p--');
$interpolateProvider.endSymbol('--p');
});
app.controller("PostCtrl", ["$scope", "$http", function($scope, $http{
var store = this;
$http.get('/authors/')
.success(function(data){
$scope.datas = data;
console.log(data[0]);
});
}]); })();
<强> HTML -
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
{% load staticfiles %}
<title>Angular.js with Django</title>
</head>
<body ng-controller="PostCtrl as pc">
<h1>Welcome to Angular.JS</h1>
<div ng-repeat="data in datas">
<h3>p-- data.first_name --p </h3>
</div>
<script src="{% static 'lib/angular.min.js' %}"></script>
<script src="{% static 'JS/app.js' %}"></script>
</body>
</html>