angular.js > 如何在视图中获取内部 JSON 数据（使用 ng-repeat 指令）
Posted
技术标签:
【中文标题】angular.js > 如何在视图中获取内部 JSON 数据（使用 ng-repeat 指令）【英文标题】：angular.js > How can i get inner JSON data in view ( using ng-repeat directive ) 【发布时间】：2014-09-25 15:10:23 【问题描述】：我在 angular.js 使用 ng-repeat 指令渲染 json 数据时遇到问题。我目前正在使用 Django REST 框架。请参阅下面的源代码。谢谢。
REST API 运行良好。 （通过 curl 命令得到结果）
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"]%
app.js : 使用 $http 服务的非常简单的控制器。
(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]);
);
]);
)();
console.log(data[0]) 的结果是 ...（来自 Chrome 开发者工具 > 控制台）
Object id: 1, title: "First Post", content: "hello world, my first post"
我实际上不确定为什么这是一个“对象”。
查看（index.html）
<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>
渲染的 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-hidedisplay:none !important;ng\:formdisplay:block;.ng-animate-block-transitionstransition:0s all!important;-webkit-transition:0s all!important;.ng-hide-add-active,.ng-hide-removedisplay: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 ？
【问题讨论】：
这个链接很有帮助。 ***.com/questions/13671701/… 【参考方案1】：您的 Angular 代码对我来说看起来不错。我认为您遇到的问题是这是一个 Django 模板，它也使用花括号。当 Django 处理模板时，它会在这些大括号中寻找它自己的变量，但没有找到，就将它们替换为空。
有几个解决方案。一个简单的方法是一个名为Verbatim 的漂亮模板标签，它允许您在模板中执行此操作：
%load verbatim%
%verbatim%
<h3> data.title </h3>
%endverbatim%
注意：从 django 1.5 开始，逐字包含在内。
【讨论】：
【参考方案2】：测试了返回的数据，在我的测试中运行良好，但我没有使用$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]);
);
]);
)();
【讨论】：
【参考方案3】：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>
【讨论】：
以上是关于angular.js > 如何在视图中获取内部 JSON 数据（使用 ng-repeat 指令）的主要内容，如果未能解决你的问题，请参考以下文章
如何获取使用 Angular js 绑定的 div 的内容？