повторить на основе вложенных элементов

0

Основываясь на приведенных ниже данных и предполагая, что больше автомобилей и больше идентификаторов пользователей firebase, связанных с конкретными автомобилями. Как бы я ng-повторить только данные автомобиля, которые соответствуют текущему пользователю. Пример: если бы я был подписан и мой Firebase.uid был simplelogin: 26, как бы я мог повторить данные автомобиля, в которых был мой Firebase.uid? Поэтому в этом случае будет отображаться только Honda.

Я прочитал, что способ организации данных 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"
     }
   }
 }
  • 0
    Здравствуйте! Добро пожаловать в стек переполнения. Вы не включили определение cars в свои данные или то, как вы вставили их в $scope (или любой код, который действительно полезен). Пожалуйста, включите mcve, демонстрирующий вашу попытку на данный момент.
Теги:
firebase
ng-repeat

2 ответа

3
Лучший ответ

Это не идеальная структура данных. Если у автомобилей действительно есть отношения 1:1 с пользователями, как следует из данных, то их следует просто сохранить их пользователем, а затем запросить этот конкретный идентификатор пользователя:

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

Теперь запрос пользователей по автомобилю чрезвычайно прост:

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

Если автомобили не могут быть разделены пользователем, так как они имеют отношение n: 1, тогда запрос может предоставить такую же функциональность (убедитесь, что вы указали их на сервере):

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 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 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 охватывает многие темы, подобные этой, а также представляет библиотеку привязок для обработки синхронизации удаленных/локальных данных от вашего имени.

Кроме того, в документах Firebase рассматриваются многие темы, такие как структуры данных, индексирование отношений "многие-к-одному" или "многие-ко-многим" и т.д. Я настоятельно рекомендую прочитать переднюю часть направляющего выступа назад, прежде чем идти дальше.

  • 0
    Спасибо вам за тщательный ответ и предложения. Похоже, чтобы сделать это правильно, мне придется остановиться и (переосмыслить / узнать больше), прежде чем я продолжу. Это, кажется, добавляет еще один уровень сложности, с которым я еще не сталкивался, но я думаю, что сейчас самое подходящее время для погружения глубже. лол спасибо.
  • 0
    Объединение данных сложно в NoSQL. Firebase будет продолжать делать это проще, пока мы будем повторяться. На данный момент, есть некоторая работа, связанная с изучением техник, но они довольно просты, когда вы их освоили.
0

Вы можете перебирать свойства объекта в ng-repeat используя синтаксис ng-repeat="(key, value) in data"

<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>
  • 0
    Спасибо за ответ, это само по себе не помогло, но я также должен был добавить: (ng-show = "value.hasOwnProperty (Firebase.uid)), но это направило меня в правильном направлении. Спасибо!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню