Javascript 如何使用angularjs ngRepeat呈现或填充来自websocket服务（如pusher）的数据？

我是实时应用程序的新手，有一段时间它很麻烦如何使用angularjs ngRepeat指令呈现来自websocket服务（如pusher）的数据。。 下面是api的响应 还有我的代码片段

客户端。

$scope.exam_results = [{}];
    var client = new Pusher('some_key');
    var pusher = $pusher(client);
    var my_channel = pusher.subscribe('some_channel');
    my_channel.bind('some_event', function(data) {
        $scope.some_var = data;
        console.log($scope.some_var);
    });

服务器端

.....
LaravelPusher::trigger($some_channel, 'some_event',  $some_var);

顺便说一下，我用的是laravel和angularjs

这里需要点帮助，伙计们。。多谢各位^_^

Api响应

.....
LaravelPusher::trigger($some_channel, 'some_event',  $some_var);

[
{
“id”：1，
“受试者id”：1，
“学生id”：1，
“正确”：0，
“不正确”：30，
“创建时间”：“2016-02-17 17:47:36”，
“更新时间”：“-0001-11-30 00:00:00”，
“参加考试”：1，
“学生”：{
“id”：1，
“名字”：“玛丽·罗斯”，
“姓氏”：“拉布拉多”，
“中间名”：“内能”，
“出生日期”：“2016-02-10”，
“电子邮件”：maryrose@dummy.com",
“用户名”：“maryrose”，
“性别”：“女性”，
“密码”：“65CE8EBFE1687CB8A5460FAB48BCEA413A0E17F5363912AC4667F056EECA461”，
“guardianname”：“未命名”，
“guardiancontact”：“+630908356178”，
“个人联系人”：“+630908356178”，
“部门id”：1，
“参加考试”：1，
“创建时间”：“2016-02-16 00:00:00”，
“更新时间：”2016-02-17 17:47:58
},
“主题”：{
“id”：1，
“subjectname”：“算法”，
“slug”：“算法”，
“时间”：“10:00:00”，
“附表”：“MWF”，
“教师id”：1，
“创建时间”：“2016-02-12 09:28:27”，
“更新时间：”2016-02-12 09:28:27
}
},
{
“id”：2，
“受试者id”：1，
“学生id”：4，
“正确”：0，
“不正确”：30，
“创建时间”：“2016-02-17 18:54:11”，
“更新时间”：“-0001-11-30 00:00:00”，
“参加考试”：1，
“学生”：{
“id”：4，
“名字”：“琼·菲利斯”，
“姓氏”：“罗加诺”，
“middlename”：“Latoja”，
“出生日期”：“2016-02-14”，
“电子邮件”：joangwapa@dummy.com",
“用户名”：“Joann143”，
“性别”：“女性”，
“密码”：“65CE8EBFE1687CB8A5460FAB48BCEA413A0E17F5363912AC4667F056EECA461”，
“guardianname”：“未命名”，
“guardiancontact”：“+639083561578”，
“个人联系人”：“+639083561578”，
“部门id”：1，
“参加考试”：1，
“创建时间”：“2016-02-16 00:00:00”，
“更新时间：”2016-02-17 18:57:43
},
“主题”：{
“id”：1，
“subjectname”：“算法”，
“slug”：“算法”，
“时间”：“10:00:00”，
“附表”：“MWF”，
“教师id”：1，
“创建时间”：“2016-02-12 09:28:27”，
“更新时间：”2016-02-12 09:28:27
}
}
]

作为

$scope.examing\u results

是一个数组，为什么不使用

array.concat（）

将新的

数据添加到其中呢？Angular的摘要循环将呈现：

$scope.exam_results = [];

// your websocket code

my_channel.bind('some_event', function(data) {
    $scope.exam_results.concat(data);
    console.log($scope.exam_results);
});

显然，来自websocket的数据需要随着时间的推移保持相同的格式，并且还需要一个对象数组。您可以将您的
ng repeat
绑定到
$scope.examing\u结果

<ul>
   <li ng-repeat="result in exam_results track by $index">
       {{result.students.firstname}}
   </li>
</ul>



{{result.students.firstname}


如果事件数据始终是一个对象数组

你可以这样做-

$scope.exam_results = []; // Changed this to Array.
var client = new Pusher('some_key');
var pusher = $pusher(client);
var my_channel = pusher.subscribe('some_channel');
my_channel.bind('some_event', function(data) {
    $scope.exam_results.concat(data) // Concatinating Array to merge with existing Results.
});

<div ng-repeat="result in exam_results">
 <!-- HTML to render Result -->
 <span>{{result.students.first_name}}</span>
</div>

现在你可以有这样的观点-

$scope.exam_results = []; // Changed this to Array.
var client = new Pusher('some_key');
var pusher = $pusher(client);
var my_channel = pusher.subscribe('some_channel');
my_channel.bind('some_event', function(data) {
    $scope.exam_results.concat(data) // Concatinating Array to merge with existing Results.
});

<div ng-repeat="result in exam_results">
 <!-- HTML to render Result -->
 <span>{{result.students.first_name}}</span>
</div>


{{result.students.first{u name}}

希望这有帮助。
如果
$scope.some\u var
是一个数组，为什么不使用
array.concat（）
将新的
数据添加到其中呢？Angular的摘要循环将呈现它。请显示一些snnipet$scope.some_var.concat（数据）。是吗？把它做成了一个答案，这样代码片段就可读了。是的，它是一个数组。不过，我不知道你想渲染什么。因为它只是一个PNG，所以很难说所有的数据集都是一样的，“firstname”：“Mary Rose”，“lastname”：“Labrador”，“middlename”：“Neneng”，“birthdate”：“2016-02-10”，}，当我试图将$scope.some_var初始化为空数组时，您的代码片段是一个空数组，但在对象数组中，日志结果是[object][object]因为对象数组正是PNG中的内容。请参阅我更新的答案如何呈现。另外：请阅读如果它是对象数组会发生什么？编辑答案以适应两者。现在，不管是单个对象还是对象数组。当我初始化$scope.exa_时，结果为空数组（[]）我在控制台上得到了空数组，如果用[{}]初始化它，我得到了[Object]在控制台中，api的响应是两个objectsYeah。因此，基本上需要做的是：当Pusher向您发送事件数据时，您需要将这些对象添加到
$scope.exam\u results
中。您在控制台中看到的意思是-数组包含对象，但该对象没有任何内容。但是当我以这种方式尝试时，$scope.exam\u result=data我得到了这个[对象]