CODEWITHSUNDEEP
angularjspug
Jannis Defu
Jannis Defu

Reputation: 1428

AngularJS + Jade ng-repeat does not fill the table

I am trying to fill a table via AngularJS. My controller receives through a socket data.

The data looks like:

[{score: 2, team: 1, kills: 9, assists: 2, deaths: 0}, {score: 2, team: 1, kills: 9, assists: 2, deaths: 0}]

I tried to reduce the code to the relevant stuff, but maybe I did something wrong by that, but the jade templates renderes usually.

index.jade

doctype html
html(lang='en', ng-app="app")
  head
    meta(charset='utf-8')
    meta(http-equiv='X-UA-Compatible', content='IE=edge')
    meta(name='viewport', content='width=device-width, initial-scale=1')
    title= title
    // Bootstrap CSS
    link(href='stylesheets/bootstrap.min.css', rel='stylesheet')
    // Socket
    script(src='https://cdn.socket.io/socket.io-1.3.5.js')
    // jQuery
    script(src='http://code.jquery.com/jquery-2.1.3.min.js')
    // Angular
    script(src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js')
    script(src='javascripts/controller.js')
    // Main CSS
    link(href='stylesheets/main.css', rel='stylesheet')
  body(ng-controller="controller")
    .content.row
      .col-md-12.data
        .table-responsive
          table.table.table-hover
            thead
              tr
                th Score
                th Kills
                th Assists
                th Deaths
            tbody
              tr(ng-repeat="1 in data")
                td {{1.score}}
                td {{1.kills}}
                td {{1.assists}}
                td {{1.deaths}}
    script(src='javascripts/bootstrap.min.js')

controller.js

var app = angular.module('app', []);
app.controller('controller', function($scope) {
    var socket = io('http://localhost:8080');
    socket.on('data', function(data) {
        $scope.data = data;
    });
});

My controller receives the data and when I do console.log($scope.data) it returns me my sent data. The problems must be somewhere in the jade template.

Upvotes: 1

Views: 1605

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

You need to do $scope.$apply() after assigning data in socket.on('data' event. Because udpating scope variable through an events will not run digest cycle. you need to run it manually by call $apply() on $scope or either you could wrap function inside $scope.$apply(function(){ //do scope variable updation from here })

Code

var app = angular.module('app', []);
app.controller('controller', function($scope) {
    var socket = io('http://localhost:8080');
    socket.on('data', function(data) {
        $scope.data = data;
        $scope.$apply();
    });
});

Upvotes: 1

Related Questions