CODEWITHSUNDEEP
javascriptangularjsfirebase
Kiel L.
Kiel L.

Reputation: 29

ng-repeat through items from firebase

I am trying to ngrepeat through items from firebase. I have them in the console.but the expressions are not working. Im not sure what to do and have tried everything. Any help would be great. Thanks

image of console here:

enter image description here

//js
firebaseRef.once("value", function(snapshot) {
    $timeout(function(){
        $scope.boats = snapshot.val();
        console.log($scope.boats); //image of console up^
    }, function (errorObject) {
        console.log("The read failed: " + errorObject.code);
    },0);
});

//html
     <div class="row pad" ng-repeat="boat in boats">
        <span class='text-center' >{{boat.title}}</span>
     </div>

Upvotes: 1

Views: 914

Answers (2)

funador
funador

Reputation: 552

The data is stored as boat.Title but is being accessed as boat.title

Upvotes: 3

David East
David East

Reputation: 32604

@funador is correct, you need boat.Title instead of boat.title.

However, you should look into using AngularFire for Angular 1 to make your life a bit easier.

AngularFire synchronizes collections with the Firebase database and the $digest loop.

angular.module('app', ['firebase'])
  .constant('FirebaseUrl', '<my-firebase-app>')
  .controller('MyCtrl', MyController)
  .config(function($firebaseRefProvider, FirebaseUrl) {
     $firebaseRefProvider.registerUrl({
       default: FirebaseUrl,
       boats: FirebaseUrl + '/boats'
     });
  });

function MyController($scope, $firebaseRef, $firebaseArray) {
  $scope.boats = $firebaseArray($firebaseRef.boats);
}

AngularFire allows you to specify your references in the config phase using the $firebaseRefProvider. Then you'll be able to inject the $firebaseRef service.

A $firebaseArray will automatically synchronize changes to your template. To create one, pass in boats the reference to the array.

What's awesome about this is that there's no $timeout needed. AngularFire handles it for you.

And your ng-repeat is still the same:

<div class="row pad" ng-repeat="boat in boats">
  <span class='text-center' >{{boat.title}}</span>
</div>

Upvotes: 2

Related Questions