JSFiddle - React, Tailwind, and code Playground

by Ryan W Kan

HTML

<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.6.0/angularfire.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="testController">
    <input type="text" ng-model="search.searchText"></input>

    <div>
        <ul ng-repeat="person in people | orderByPriority | filter:search.searchText">
            <li>name:{{ person.name }}</li>
            <li>age:{{ person.age }}</li>
        </ul>
       
        <input type="text" placeholder="name" ng-model="newPerson.name"/>
        <input type="text" placeholder="age" ng-model="newPerson.age"/>
        <button type="submit" ng-click="addPerson()">Add New Person</button>
    </div>
  </div>      
</div>

JavaScript

var myApp = angular.module('myApp', ["firebase"]);

myApp.controller('testController', function ($scope, $firebase) {
    $scope.data = [{
        name: "Alice",
        age: 28
    }, {
        name: "Bob",
        age: 55
    }];
     
    var peopleRef = new Firebase("https://sqt.firebaseio.com/people");
    // Automatically syncs everywhere in realtime
    $scope.people = $firebase(peopleRef);

    $scope.addPerson = function(){
        $scope.people.$add($scope.newPerson);
        $scope.newPerson = "";
    };
    
});