Why does not the data appear on the screen using firebase and angular?

Question

Why does not the data appear on the screen using firebase and angular?

Navigation

#1 by (1 votes)
#2 by (1 votes)

2

Good afternoon guys, Something that should be simple and I can not. I am querying my database in firebase, where it has 2 records saved. I do the search and appear returns the data in the console, using console.log (), BUT, I can not display this data on the screen, where they should appear !!!

app.controller('ListagemCtrl', function($scope, $rootScope, $location, $firebaseObject){
$rootScope.activetab = $location.path();

$scope.filmesCadastrados = [];

firebase.database().ref('filmes/').once('value').then(function (snapshot) {
    for(var id in snapshot.val()){

        var filme = snapshot.val()[id];
        console.log(filme);

        $scope.filmesCadastrados.push(filme);
    }
});

});

And here's my HTML:

<div ng-controller="ListagemCtrl">
  <table class="table table-striped" >
    <tbody>
        <tr> 
            <th>Título do Filme</th>
            <th>Diretor</th>
            <th>Categoria</th>
            <th>Duração</th>
        </tr>
        <tr ng-repeat="filme in filmesCadastrados">
            <td>{{filme.titulo}}</td>
            <td>{{filme.diretor}}</td>
            <td>{{filme.categoria}}</td>
            <td>{{filme.duracao}}</td>
        </tr>
    </tbody>
    </table>
</div>

This is displayed in the console: Where am I going wrong?

angularjs firebase

asked by anonymous 24.11.2016 / 18:23

2 answers

1

The update, triggered by a promise of the firebase, is not triggering the $digest loop. Use the $timeout service, which provides a wrapper that invokes the loop, to provoke the procreation by the Angular:

app.controller('ListagemCtrl', function($scope, $rootScope, $timeout, $location, $firebaseObject){
  $rootScope.activetab = $location.path();

  $scope.filmesCadastrados = [];

  firebase.database().ref('filmes/').once('value').then(function (snapshot) {

    $timeout(function(snapshot) {

      for(var id in snapshot.val()){

        var filme = snapshot.val()[id];
        console.log(filme);

        $scope.filmesCadastrados.push(filme);
      };

    }, 1);
  });
});

29.11.2016 / 21:53

Dynamic button creation Laravel 5.3 - About Changing the App Directory

score 1 · Accepted Answer

1

Do this:

$scope.filmesCadastrados.push({
    titulo: filme.titulo,
    diretor: filme.diretor,
    categoria: filme.categoria,
    duracao: filme.duracao
})

24.11.2016 / 18:30