CODEWITHSUNDEEP
angularjsangularjs-ng-repeatfirebaseangularfire
Anthony D
Anthony D

Reputation: 123

Removed Firebase object doesn't update in the view

I'm trying to remove items from the $scope.joinedGames variable the is set to an empty array. The variable is used in the view for an ng-repeat. With the code I have the players are being removed from their corresponding game within the players object in Firebase, but there is no change in the view until I refresh. I have done this before like (joinedGames.$remove(game)) directly in the ng-repeat and it's worked as expected. This is the first time I have pushed into a scope variable for the repeat, I think this is why I'm having problems, but I can't figure it out. Much thanks!

game.controller('dashboard.controller', ['$scope', '$state', '$stateParams', 'Auth', '$firebaseArray', '$firebaseObject', 'Fire', function ($scope, $state, $stateParams, auth, $firebaseArray, $firebaseObject, fire) {

  $scope.remove;

  // Get Current signed in user auth data
  var player = auth.$getAuth();

  // Find a user in the database that is equal to the id of the current singed in user
  $scope.player = $firebaseObject(fire.child('users').child(player.uid));

  // set up some empty arrays
  var games = [];
  $scope.joinedGames = [];

  // Anything with $ look at AngularFire docs

  // .child, .on, .key, .val, .forEach all Firebase Web API

  // get a pointer to the list of games that have players
  var playersRef = fire.child('players');

  // set up a callback on the list of games that have players
  playersRef.on('value', function(snapshot) {
    // console.log(snapshot.val());

    // set games equal to all the children
    var games = snapshot;

    // loop through all the children
    games.forEach(function(gameSnapshot) {
      // console.log(gameSnapshot.key())

      // set gameID to the key of the current child
      var gameID = gameSnapshot.key();

      // set players to the children of this game
      var players = gameSnapshot;

      // loop through all the children
      players.forEach(function(playerSnapshot) {
        // console.log(playerSnapshot.val());

        // set player to the data of this child
        var player = playerSnapshot.val();

        // check if this child has a key called id with a value equal to the signed in player's id
        if (player.id === $scope.player.$id) {

          // create a firebase object from the reference to the gameID
          var joinedGame = $firebaseObject(fire.child('games').child(gameID));

          // push the game object into the joinedGames scope variable
          $scope.joinedGames.push(joinedGame);
        }
      });
    });
  });

  $scope.removeDashboardGame = function(game) {
    var gameID = game.$id;
    var thisGame = fire.child('players').child(gameID);

    thisGame.on('value', function(snapshot) {
      snapshot.forEach(function(unqKey){
        var thisPlayer = unqKey.key()
          thisGame.child(thisPlayer).remove();
      })
    })
  }
}]);

HTML

<div ng-controller="dashboard.controller">
  <h1>Your Games</h1>
  <ul>
    <li class="activeGames" ng-repeat="game in joinedGames">
      <a href="#" ng-click="gameDetails(game)">Course: {{ game.location.course }} <br> Holes: {{ game.rules.holes }}</a>
      <a href="#" ng-click="removeDashboardGame(game)">Remove</a>
    </li>
  </ul>
</div>

Upvotes: 0

Views: 479

Answers (2)

Nikita Kuznetsov
Nikita Kuznetsov

Reputation: 169

Instead of initializing empty arrays (lines 12-13) that you would have to manage yourself. Create synchronized arrays with the AngularFire library.

$scope.joinedGames = $firebaseArray(joinedGamesRef);

Upvotes: 0

mrodrigues
mrodrigues

Reputation: 1082

I guess you need to call $scope.$apply() after removing that object, since the code is being run inside a callback.

Upvotes: 1

Related Questions