angular.js > 如何在视图中获取内部 JSON 数据（使用 ng-repeat 指令）答案

【问题标题】：angular.js > How can i get inner JSON data in view ( using ng-repeat directive )angular.js > 如何在视图中获取内部 JSON 数据（使用 ng-repeat 指令）
【发布时间】：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-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 }} ？

【问题讨论】：

这个链接很有帮助。 stackoverflow.com/questions/13671701/…

标签： json django angularjs

【解决方案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>

【讨论】：

REST API 运行良好。 （通过 curl 命令得到结果）

app.js : 使用 $http 服务的非常简单的控制器。

console.log(data[0]) 的结果是 ...（来自 Chrome 开发者工具 > 控制台）

查看（index.html）

渲染的 HTML，这不是我想要的。

REST API 运行良好。（通过 curl 命令得到结果）