基于嵌套项的 ng-repeat

Question

基于以下数据，并假设有更多汽车和更多与特定汽车关联的 firebase 用户 ID。我将如何仅重复与当前用户匹配的汽车数据。示例：如果我已登录并且我的 Firebase.uid 是 simplelogin:26，我将如何 ng-repeat 包含我的 Firebase.uid 的汽车数据？所以在这种情况下它只会显示本田。

我了解到您组织 Firebase 数据的方式非常重要，因此我不确定这是否是理想的格式，无论哪种方式我想知道这是否可能是目前的格式。我仍然在学习这一切，但似乎无法弄清楚。任何见解都会很棒，谢谢！

html

<h1>MyCars</h1>
  <ul>
    <li ng-repeat="car in cars">     
      <p>Make: {{ car.type }}</p>
      <p>Year: {{ car.year }}</p>
      <p>color: {{ car.color }}</p>
    </li>
  </ul>

JSON

"cars": {
    "-JRHTHaIs-jNPLXOQivY": {
      "type": "Honda",
      "year": "2008",
      "color":"red",
      "simplelogin:26": {
       "name":"ted"
     },
      "simplelogin:32": {
       "name":"ted"
      }
    },
    "-JRHTHaKuITFIhnj02kE": {
      "type": "Chevy",
      "year": "2006",
      "color":"white",
      "simplelogin:16": {
       "name":"ted"
     }
   }
 }

Answer 1

您可以使用语法 ng-repeat="(key, value) in data"

遍历 ng-repeat 中对象的属性

<ul>
    <li ng-repeat="(key, value) in cars">
        <p>Make: {{ value.type }}</p>
        <p>Year: {{ value.year }}</p>
        <p>color: {{ value.color }}</p>
    </li>
</ul>

Answer 2

这不是一个理想的数据结构。如果汽车确实与用户有 1:1 关系，如数据所示，那么应该简单地按用户存储它们，然后查询该特定用户 ID：

{
  "cars": {
      "ted": {
         ...
      }
  }
}

现在按用户查询汽车非常简单：

var ref = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com/");
$scope.cars = $firebaseArray(ref.child('cars/<USER ID>'));

如果汽车不能被用户拆分，因为他们有n:1关系，那么a query can provide the same functionality (make sure you index them on the server):

var ref = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com/");
var query = ref.child('cars').orderByChild('name').equalTo('ted');
$scope.cars = $firebaseArray(query);

如果你想有一个n:n关系，那么将用户索引到汽车更合适：

"cars": {
    "-JRHTHaIs-jNPLXOQivY": {
      "type": "Honda",
      "year": "2008",
      "color":"red"
     },
     ...
},

"owners": {
   "ted": {
      "-JRHTHaIs-jNPLXOQivY": true,
      ...
   }
}

为给定用户取车现在有点困难，但仍然不合理：

angular.factory('CachedCarList', function() {
  // a simple cache of Firebase objects looked up by key
  // in this case, a list of cars that have an n:n relationship to users
  var carsRef = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com/cars");
  var carsLoaded = {};

  return {
    get: function(carId) {
      if( !carsLoaded.hasOwnProperty(carId) ) {
        carsLoaded[cardId] = $firebaseObject(carsRef.child(carId));
      }
      return carsLoaded[carId];
    },
    destroy: function(carId) {
      angular.forEach(carsLoaded, function(car) {
        car.$destroy();
      });
      carsLoaded = {};
    }
  }
});

angular.factory('CarList', function($firebaseArray, CachedCarList) {
   var ref = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com/");

   var CarsIndexed = $firebaseArray.$extend({
     '$$added': function(snapshot) {
        // when something is added to the index, synchronize the actual car data
        // we use the $loaded promise because returning it here will make AngularFire
        // wait for that data to load before triggering added events and Angular's compiler
        return CachedCarList.get(snapshot.key()).$loaded();
     },

     '$$updated': function(snapshot) {
        return false; // our cars update themselves, nothing to do here
     }
   });

   return function(userId) {
      // when a list of cars is requested for a specific user, we return an CarsIndexed
      // than synchronizes on the index, and then loads specific cars by referencing their
      // data individually
      return new CarsIndexed(ref.child('owners/'+userId));
   }
});

并且 firebase-util's NormalizedCollection 可以帮助简化此过程：

angular.factory('CarList', function($firebaseArray) {
  var ref = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com/");
  return function(userId) {
    var nc new Firebase.util.NormalizedCollection(
      ref.child('owners/' + userId),
      ref.child('cars')
    ).select('cars.type', 'cars.year', 'cars.color')
    return $firebaseArray(nc.ref());
  }
});

Firebase Angular guide 涵盖了许多与此类似的主题，并且还引入了一个绑定库来代表您处理同步 remote/local 数据。

此外，Firebase 文档中还涵盖了许多主题，例如数据结构、索引多对一或多对多关系等。我强烈建议在继续阅读之前从头到尾阅读 the guide。

基于嵌套项的 ng-repeat

ng-repeat based based on nested items

angularjs

firebase

ng-repeat

html