角。如何在视图中获取内部JSON数据(使用ng-repeat指令)

i am having trouble with angular.js rendering json data with ng-repeat directives. I am currently working with Django REST Framework. Please see the source code below. Thanks.

我的角度有问题。js使用ng-repeat指令呈现json数据。我目前正在使用Django REST框架。请参见下面的源代码。谢谢。

REST API works very well. ( result via curl command )

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 : very simple controller using $http service.

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

result of console.log(data[0]) is ... ( from Chrome Developer Tools > Console )

Object {id: 1, title: "First Post", content: "hello world, my first post"}

i am actually not sure about why this is an "Object".

实际上我不确定为什么这是一个“对象”。

view ( 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>

Rendered HTML, which not i intended.

it did NOT rendered {{ data.title }}, ( h3 element is empty )

它没有呈现{data。标题}(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>

what should i have to change to render appropriate json data in view. in this case {{ data.title }} ?

我需要更改什么才能在视图中呈现适当的json数据。在本例中为{data。标题} } ?

3 个解决方案

#1

Your angular code looks fine to me. The problem I think you are having is this is a Django template, which also uses curly braces. When Django processes the template it is looking for its own variable in those braces and, not finding one, replaces them with nothing.

我觉得你的角码不错。我认为您遇到的问题是这是一个Django模板，它也使用大括号。当Django处理模板时，它正在这些大括号中寻找它自己的变量，而不是找到一个大括号，因此没有替换它们。

There are a few solutions. An easy one is a nice template tag called Verbatim that will allow you to do this in your template:

有一些解决方案。一个简单的例子就是一个很好的模板标签，它可以让你在模板中做这个:

{%load verbatim%}

{%verbatim%}
<h3>{{ data.title }}</h3>
{%endverbatim%}

Note: As of django 1.5 verbatim is included.

注:包括django 1.5。

#2

Tested the returned data and it works fine in my test, but I didn't use $http. But according to this post you may need to initialize the $scope variable first before calling the $http.get() method since it returns a $promise which can't be iterated over.

测试了返回的数据，在我的测试中运行良好，但是我没有使用$http。但是根据这篇文章，在调用$http.get()方法之前，您可能需要先初始化$scope变量，因为它返回一个不能迭代的$promise。

Try this

试试这个

(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

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 -

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>

#1