JSFiddle - React, Tailwind, and code Playground
by Ryan W Kan
HTML
<body ng-app="testApp" ng-controller="TestCtrl">
<div data-ng-repeat="tDelivery in trackedDelivery | orderByPriority">
<div class="profile-cards">
<p>{{tDelivery}}</p>
</div>
</div>
<br/><br/>
<h5>Question: How do I access the individual delivery details i.e. status?</h5>
</body>
CSS
</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.min.js"></script>
<script src="http://cdn.firebase.com/v0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/firebase-util/0.1.0/firebase-util.min.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.7.1/angularfire.min.js"></script>
<style>
JavaScript
'use strict';
var app = angular.module('testApp', [
'firebase'
]);
app.controller('TestCtrl', function($scope, $firebase){
var fb = new Firebase('https://so0001.firebaseio.com');
var trackingRef = fb.child('users/Cara/deliveryTracking');
var trackingFb = $firebase(trackingRef);
trackingFb.$on('loaded', function(){
console.log(trackingFb.$getIndex());
});
var trackedDeliveryRefArray = [];
(function(){
trackingFb.$on('loaded', function(){
//console.log(trackingFb.$getIndex());
angular.forEach($firebase(trackingRef ).$getIndex(), function (k,v){
var trackedDeliveryRef = new Firebase.util.intersection(fb.child('users/Cara/deliveryTracking/' + k ),
fb.child('deliveries' + '/' + k ));
trackedDeliveryRefArray.push($firebase(trackedDeliveryRef));
});
});
})();
$scope.trackedDelivery = trackedDeliveryRefArray;
});