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

Question

我是实时应用程序的新手，它困扰了一段时间如何使用 angularjs ngRepeat 指令呈现来自 websocket 服务（如推送器）的数据。 以下是来自 api 的响应 以及我拥有的 sn-ps 代码。

客户端。

$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 响应

[
  {
    "id": 1,
    "subject_id": 1,
    "student_id": 1,
    "correct": 0,
    "incorrect": 30,
    "created_at": "2016-02-17 17:47:36",
    "updated_at": "-0001-11-30 00:00:00",
    "exam_taken": 1,
    "students": {
      "id": 1,
      "firstname": "Mary Rose",
      "lastname": "Labrador",
      "middlename": "Neneng",
      "birthdate": "2016-02-10",
      "email": "maryrose@dummy.com",
      "username": "maryrose",
      "gender": "Female",
      "password": "65ce8ebfe1687cb8a5460fab48bcea413a0e17f53636912ac4667f056eeca461",
      "guardianname": "Unnamed",
      "guardiancontact": "+6309083561578",
      "personalcontact": "+6309083561578",
      "department_id": 1,
      "taken_exam": 1,
      "created_at": "2016-02-16 00:00:00",
      "updated_at": "2016-02-17 17:47:58"
    },
    "subjects": {
      "id": 1,
      "subjectname": "Algorithm",
      "slug": "algorithm",
      "time": "10:00:00",
      "schedule": "MWF",
      "teacher_id": 1,
      "created_at": "2016-02-12 09:28:27",
      "updated_at": "2016-02-12 09:28:27"
    }
  },
  {
    "id": 2,
    "subject_id": 1,
    "student_id": 4,
    "correct": 0,
    "incorrect": 30,
    "created_at": "2016-02-17 18:54:11",
    "updated_at": "-0001-11-30 00:00:00",
    "exam_taken": 1,
    "students": {
      "id": 4,
      "firstname": "Joan Phylis",
      "lastname": "Rogano",
      "middlename": "Latoja",
      "birthdate": "2016-02-14",
      "email": "joangwapa@dummy.com",
      "username": "joan143",
      "gender": "Female",
      "password": "65ce8ebfe1687cb8a5460fab48bcea413a0e17f53636912ac4667f056eeca461",
      "guardianname": "Unnamed",
      "guardiancontact": "+639083561578",
      "personalcontact": "+639083561578",
      "department_id": 1,
      "taken_exam": 1,
      "created_at": "2016-02-16 00:00:00",
      "updated_at": "2016-02-17 18:57:43"
    },
    "subjects": {
      "id": 1,
      "subjectname": "Algorithm",
      "slug": "algorithm",
      "time": "10:00:00",
      "schedule": "MWF",
      "teacher_id": 1,
      "created_at": "2016-02-12 09:28:27",
      "updated_at": "2016-02-12 09:28:27"
    }
  }
]

HTML

<tr ng-reapeat="result in exam_results track by $index">
                    <td>
                        <span class="text-success">@{{result.students.lastname}}, 
                            @{{result.students.firstname}} @{{result.students.middlename}}
                        </span>
                    </td>
                    <td><a href="javascript:void(0);" class="fa fa-eye pull-right"> View</a></td>
                </tr>

Answer 1

$scope.exam_results 是一个数组，为什么不直接使用Array.concat() 来添加新的data 呢？然后 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.exam_results。

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

Answer 2

如果您的事件数据始终是对象数组。

你可以这样做 -

$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>

希望这会有所帮助。