Joining data between paths based on id using Angul

问题:

I am currently working on an app using firebase and angularJS (ionic). Basically this is a car management app, so you have people sharing their cars with others. I tried to structure the data as flat as possible to be efficient. My issue here is that if without problem I can display the list of the car_id of the different cars shared with the logged user, I can\'t find a way to display the list of cars shared with the user displaying the year and the model.

Thank you in advance for your help !

{
\"rules\": {
    \"users\": {
        \".write\": true,
        \"$uid\": {
            \".read\": \"auth != null && auth.uid == $uid\"
        },
        \"cars\": {
          \"car_id\":true,
          \"role\":true // Owner, borower...
        }
    },
    \"cars\": {
      \"car_id\":true,
      \"model\":true,
      \"year\":true
    }
}

}

carapp.controller(\"carsController\", function($scope, $firebaseObject, $ionicPopup, $ionicHistory) {

$ionicHistory.clearHistory();

$scope.list = function() {
  frbAuth = frb.getAuth();
  if(frbAuth) {
    var userObject = $firebaseObject(frb.child(\"users/\" + frbAuth.uid));
    userObject.$bindTo($scope, \"user\");
    $scope.cars = frb.child(\"cars\");
}}

$scope.createCar = function() {
  $ionicPopup.prompt({
    model: \'Create a new car\',
    inputType: \'text\'
  })
  .then(function(result) {
    if(result !== \"\") {
      var newCar = $scope.cars.push({
        model: result
      })
      var newCarId = newCar.key();
      $scope.user.cars.push({car_id: newCarId, role: \"owner\" });

    } else {
        console.log(\"Action not completed\");
    }
});

}

});

    <div class=\"list\">
     <a ng-repeat=\"car in user.cars\" >
         <h2>{{car.car_id}}</h2> ----> works fine !

<h2>{{car.model}}</h2> ----> How to get this working ?
         <h2>{{car.year}}</h2> ----> How to get this working ?

     </a>
</div>

回答1:

In the users/ path, begin by storing the list of cars by index, instead of in an array. So your structure would be:

{
   \"users\": {
      \"kato\": {
         \"cars\": {
            \"DeLorean\": true
         }
      }
   },

   \"cars\": {
      \"DeLorean\": {
          model: \"DeLorean\",
          year: \"1975\"
      }
   }
}

To join this using AngularFire, you have several approaches available. An AngularFire-only solution might look like this, taking advantage of $extend:

app.factory(\'CarsByUser\', function($firebaseArray) {
   return $firebaseArray.$extend({
     $$added: function(snap) {
        return new Car(snap);
     },

     $$updated: function(snap) {
        // nothing to do here; the value of the index is not used
     },

     $$removed: function(snap) {
        this.$getRecord(snap.key()).destroy();
     },

     // these could be implemented in a manner consistent with the
     // use case and above code, for simplicity, they are disabled here
     $add: readOnly,
     $save: readOnly
   });

  var carsRef = new Firebase(...).child(\'cars\');
  function Car(snap) {
     // create a reference to the data for a specific car
     this.$id = snap.key();
     this.ref = carsRef.child(this.$id);
     // listen for changes to the data
     this.ref.on(\'value\', this.updated, this);
  }

  Car.prototype.updated = function(snap) {
     this.model = data.model;
     this.year = data.year;
  }

  Car.prototype.destroy = function() {
    this.ref.off(\'value\', this.meta, this);
  };

  function readOnly() { throw new Error(\'This is a read only list\'); }
});

app.controller(\'...\', function($scope, CarsByUser, authData) {
   // authenticate first, preferably with resolve
   var ref = new Firebase(...).child(authData.uid);
   $scope.cars = CarsByUser($scope);
});

For a more sophisticated and elegant approach, one could utilize NormalizedCollection and pass that ref into the AngularFire array:

app.controller(\'...\', function($scope, $firebaseArray) {
  var ref = new Firebase(...);
  var nc = new Firebase.util.NormalizedCollection(
     ref.child(\'users/\' + authData.uid),
     ref.child(\'cars\')
  )
  .select(\'cars.model\', \'cars.year\')
  .ref();

  $scope.cars = $firebaseArray(nc);
});