無法通過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