[英]can't 'ng-repeat' through javascript array in AngularJS, (by getting a JSON object from Django)
This question is not Django related in any way because my Django view which returns a dummy JSON object works perfectly, just thought I would share the Django view which converts a Model.objects.all()
into pure JSON data then returns this pure data for an Angular controller to read and process through an ng-repeat: 这个问题与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')
Now on to my question, I'm not sure if I'm having an Angular issue or pure JavaScript issue. 现在我的问题,我不确定是遇到Angular问题还是纯JavaScript问题。 I have an Angular controller called
testjson
which calls that Django view above which then successfully returns a JSON object like this: 我有一个名为
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"
}
}
]
And so I would just like to grab the body of a particular chat_feed
to be printed in Angular JS using Angular's ng-repeat to get something like this if I wanted all chat messages from chat_feed
"Dating": 因此,如果我希望所有来自
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>
So in order to get the ng-repeat to work, I believe. 因此,为了使ng-repeat起作用,我相信。 I would have to loop through the raw JSON object, grab the 'body' string from each index and store them into an array so that's what I did:
我将不得不遍历原始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;
});
}
});
So after all that, my console.log seems to be returning the proper array just fine with the "body"
s from the correct chat_feed
. 所以毕竟,我的console.log似乎正在从正确的
chat_feed
返回与"body"
chat_feed
的适当数组。 Console.log()
is doing what I want it to do and the array it prints is properly formatted with perfect syntax, but as for the HTML which calls the ng-repeat="post in chatfeed"
angular function it doesn't seem to print anything at all unless I physically copy and past the array console.log()
prints out and replace ng-model="chatfeed"
with a hardcoded array the console.log() generates for me with no problems using ng-init="['hows it going?', 'hey everyone']"
. 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']"
。
You are calling getJSON
to populate chatfeed
when the div is clicked. 单击div时,您正在调用
getJSON
来填充chatfeed
。 I wasn't able to trigger getJSON
because I couldn't see where to click. 我无法触发
getJSON
因为我看不到要单击的位置。 So, I added some text to the div: 因此,我在div中添加了一些文本:
<div ng-controller="MainCtrl" ng-click="getJSON()">click me!
<ul>
<li ng-repeat="post in chatfeed">{{ post }}</li>
</ul>
</div>
When I clicked the div, I got an error message regarding duplicates in ng-repeat
. 当我单击div时,收到有关
ng-repeat
项的错误消息。 If currentFeed = 'Dating',
then there are 3 matching chat posts with the 'Dating' chat_feed
. 如果
currentFeed = 'Dating',
那么将有3个匹配的聊天帖子带有' chat_feed
。 To allow for the duplicates, I added a tracking expression: 为了允许重复,我添加了一个跟踪表达式:
<li ng-repeat="post in chatfeed track by $index">{{ post }}</li>
But then, the list only displayed 'Dating' 3 times. 但是,此列表仅显示“约会” 3次。 You want the messages to be displayed - not the category.
您希望显示消息,而不是类别。 So, I changed the getJSON to add
body
instead of chat_feed
to chatarray
: 因此,我将getJSON更改为将
body
而不是chat_feed
添加到chatarray
:
$scope.chatarray.push($scope.data[i].fields.body)
After making this change, the tracking expression is no long necessary because the body
of each chat is unique. 进行此更改后,不再需要跟踪表达式,因为每个聊天的
body
都是唯一的。
Here is the plunker demo with the final adjustments: http://plnkr.co/edit/J4PtDpeRHO8TVItUnHJw?p=preview 这是经过最终调整的插件演示: http ://plnkr.co/edit/J4PtDpeRHO8TVItUnHJw?p=preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.