Как визуализировать или заполнить данные, поступающие от веб-сокет сервисов, таких как толкатель, с помощью angularjs ngRepeat?
Я новичок в приложениях реального времени и некоторое время беспокоюсь о том, как визуализировать данные, поступающие из сервисов websocket, таких как pusher, с помощью директивы angularjs ngRepeat.
ниже ответ от 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 Response
[
{
"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": "[email protected]",
"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": "[email protected]",
"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"}
}
]Решение
Как $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);
});
Очевидно, что данные из веб-сокета должны быть того же формата во времени, а также массив объектов. Вы бы связали свой ng-repeat в $scope.exam_results,
<ul>
<li ng-repeat="result in exam_results track by $index">
{{result.students.firstname}}
</li>
</ul>
Другие решения
Если ваши данные о событиях всегда будут массивом объектов.
Вы можете сделать что-то вроде этого —
$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>
Надеюсь это поможет.