JSFiddle - React, Tailwind, and code Playground

by Christiaan Westerbeek

HTML

<script src="https://cdn.firebase.com/js/client/2.2.3/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/firebase-util/0.2.2/firebase-util.min.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
<ul>
    <li ng-repeat="site in sites">{{site.$id}} : {{site.companyName}}</li>
</ul>

<button ng-click="addUsingPush()">add using push</button>
<button ng-click="addUsing$Add()">add using $add</button>

JavaScript

var app = angular.module('app', ['firebase']);
app.controller('ctrl', function ($scope, $firebase, $firebaseArray) {
    var fb = new Firebase("https://dobetr.firebaseio.com/examples/pushadd");
    var ref = new Firebase.util.NormalizedCollection(
        fb.child('users/123/sites/created'),
        fb.child('sites')
    )
    .select(
        'sites.companyName',
        'sites.department',
        'created.timestamp'
    ).ref();
    ref.on('value', function(snap) {
        console.log('sites updated!', snap.key(), snap.val());
    });
    
    $scope.sites = $firebaseArray(ref);
    
    $scope.addUsingPush = function() {
        ref.push({
            companyName: 'Created via push',
            timestamp : new Date().getTime()
        });
    };
    
    $scope.addUsing$Add = function() {
        $scope.sites.$add({
            companyName: 'Created via $add',
            timestamp : new Date().getTime()
        }).then(function(ref) {
            console.log('I would love this function to be executed, but it doesn\'t');
            var id = ref.key();
            list.$indexFor(id); // returns location in the array
        });        
    };
});