使用 AngularFire 根据 id 在路径之间连接数据 [英] Joining data between paths based on id using AngularFire

问题描述

我目前正在开发一个使用 firebase 和 angularJS(离子)的应用程序.基本上这是一个汽车管理应用程序，因此您可以让人们与他人共享他们的汽车.我试图尽可能地将数据结构化以提高效率.我的问题是，如果没有问题，我可以显示与登录用户共享的不同汽车的 car_id 列表，我找不到显示与显示年份和型号的用户共享的汽车列表的方法.

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.

预先感谢您的帮助！

{
"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
    }
}

<块引用>

}

});

});

<a ng-repeat="car in user.cars" ><h2>{{car.car_id}}</h2>---->工作正常 ！

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

<块引用>

推荐答案

在 users/ 路径中，首先按索引存储汽车列表，而不是在数组中.所以你的结构是:

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"
      }
   }
}

要使用 AngularFire 加入此操作，您可以使用多种方法.仅 AngularFire 的解决方案可能如下所示，利用 $扩展:

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);
});

对于更复杂和优雅的方法，可以使用 NormalizedCollection 并将该引用传递到 AngularFire 数组中:

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);
});

这篇关于使用 AngularFire 根据 id 在路径之间连接数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！