ng-repeat based based on nested items - angularjs

Question

Based on the data below, and assuming there are more cars and more firebase user id's associated with specific cars. How would I ng-repeat only the car data that matches the current user. Example: if I was signed in and my Firebase.uid was simplelogin:26, how would I ng-repeat the car data that had my Firebase.uid within it? So in this case it would only display the Honda.
I have read that the way you organize Firebase data is really important so I'm not sure if this is formatted ideally, either way I would like to know if this is possible the way it's currently formatted. I still learning all this and can't seem to figure this out. Any insight would be great, thank you!
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

This is not an ideal data structure. If cars indeed have a 1:1 relationship with users, as the data suggests, then one should simply store them by user and then query that specific user id:
{
"cars": {
"ted": {
...
}
}
}
Now querying cars by user is extremely simple:
var ref = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com/");
$scope.cars = $firebaseArray(ref.child('cars/<USER ID>'));
If cars cannot be split by user, because they have an n:1 relationship, then 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);
If you want to have an n:n relationship, then indexing users to cars is more appropriate:
"cars": {
"-JRHTHaIs-jNPLXOQivY": {
"type": "Honda",
"year": "2008",
"color":"red"
},
...
},
"owners": {
"ted": {
"-JRHTHaIs-jNPLXOQivY": true,
...
}
}
Fetching cars for a given user is now a bit more difficult, but still not unreasonable:
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));
}
});
And firebase-util's NormalizedCollection can help make this process much simpler:
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());
}
});
The Firebase Angular guide covers many topics like this one, and also introduces a bindings library to handle syncing remote/local data on your behalf.
Also, many topics such as data structures, indexing many-to-one or many-to-many relationships, et al are covered in the Firebase docs. I'd highly recommend reading the guide front to back before going any further.

Answer 2

You can iterate over the properties on an object in ng-repeat using the syntax 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>