无法通过AngularJS中的javascript数组“ ng-repeat”（通过从Django获取JSON对象）

Question

这个问题与Django没有任何关系，因为我的返回虚拟JSON对象的Django视图工作完美，只是以为我会共享将Model.objects.all()转换为纯JSON数据的Django视图，然后为一个通过ng-repeat进行读取和处理的Angular控制器：

from django.core import serializers
from django.utils import simplejson

def json(request):

    all_objects = list(Message.objects.all())
    to_json = serializers.serialize('json', all_objects)

    return HttpResponse(to_json, mimetype='application/json')

现在我的问题，我不确定是遇到Angular问题还是纯JavaScript问题。 我有一个名为testjson的Angular控制器，它调用上面的Django视图，然后成功返回这样的JSON对象：

[
   {
      "pk":1,
      "model":"chatfeed.message",
      "fields":{
         "body":"hey everyone",
         "chat_feed":"Dating",
         "likes":0,
         "author_obj":1,
         "parent_channel":1,
         "pub_date":"2014-03-18T23:29:27Z"
      }
   },
   {
      "pk":2,
      "model":"chatfeed.message",
      "fields":{
         "body":"How's it going?",
         "chat_feed":"Dating",
         "likes":0,
         "author_obj":1,
         "parent_channel":1,
         "pub_date":"2014-03-18T23:32:05Z"
      }
   },
   {
      "pk":3,
      "model":"chatfeed.message",
      "fields":{
         "body":"So what's going on right now",
         "chat_feed":"Events",
         "likes":0,
         "author_obj":1,
         "parent_channel":2,
         "pub_date":"2014-03-18T23:32:33Z"
      }
   },
   {
      "pk":4,
      "model":"chatfeed.message",
      "fields":{
         "body":"Going pretty well actually",
         "chat_feed":"Dating",
         "likes":0,
         "author_obj":1,
         "parent_channel":1,
         "pub_date":"2014-03-18T23:32:55Z"
      }
   }
]

因此，如果我希望所有来自chat_feed “ Dating”的聊天消息，我想使用Angular的ng-repeat来获取要在Angular JS中打印的特定chat_feed的主体，以获取如下内容：

<div ng-controller="testjson" ng-click="getJSON()">
    <ul ng-model="chatfeed">
        <li ng-repeat="post in chatfeed">{$ post $}</li>
    </ul>
</div>

因此，为了使ng-repeat起作用，我相信。 我将不得不遍历原始JSON对象，从每个索引中获取“ body”字符串并将它们存储到数组中，这就是我所做的：

app.controller("testjson", function($scope, $http)
{
        $scope.getJSON = function()
            {

                var JSONObject = $http.get('http://domfa.de/testjson/').success(function(data)
                {
                    $scope.totalfeed = data.length;

                    chatarray = new Array();
                    for (var i=0; i < data.length; i++)
                    {
                        if (data[i].fields.chat_feed == $scope.currentFeed)
                        {
                            chatarray[i] = data[i].fields.chat_feed;        
                        }
                    }

                    console.log(chatarray);
                    $scope.chatfeed = chatarray;

                }); 

            }
});

所以毕竟，我的console.log似乎正在从正确的chat_feed返回与"body" chat_feed的适当数组。 Console.log()正在做我想做的事，并且它打印的数组已使用完美的语法正​​确格式化，但是对于调用ng-repeat="post in chatfeed" angular函数的HTML来说，它似乎并没有除非我物理复制并经过数组console.log() ng-model="chatfeed"打印出所有内容，否则会用console.log（）为我生成的硬编码数组使用硬编码数组替换ng-model="chatfeed"并使用ng-init="['hows it going?', 'hey everyone']" 。

Answer 1

单击div时，您正在调用getJSON来填充chatfeed 。 我无法触发getJSON因为我看不到要单击的位置。 因此，我在div中添加了一些文本：

<div ng-controller="MainCtrl" ng-click="getJSON()">click me!
  <ul>
    <li ng-repeat="post in chatfeed">{{ post }}</li>
  </ul>
</div>

当我单击div时，收到有关ng-repeat项的错误消息。 如果currentFeed = 'Dating',那么将有3个匹配的聊天帖子带有' chat_feed 。 为了允许重复，我添加了一个跟踪表达式：

<li ng-repeat="post in chatfeed track by $index">{{ post }}</li>

但是，此列表仅显示“约会” 3次。 您希望显示消息，而不是类别。 因此，我将getJSON更改为将body而不是chat_feed添加到chatarray ：

$scope.chatarray.push($scope.data[i].fields.body)

进行此更改后，不再需要跟踪表达式，因为每个聊天的body都是唯一的。

这是经过最终调整的插件演示： http ://plnkr.co/edit/J4PtDpeRHO8TVItUnHJw?p=preview