JSFiddle - React, Tailwind, and code Playground

by Mike Rawling

HTML

<div ng-app="myApp">
    <div ng-controller="NotificationsCtrl">
        <select ng-model="newNotification.type">
            <option ng-repeat="type in notificationTypes" value="{{type}}">{{type}}</option>
        </select>
        <input type="text" ng-model="newNotification.message"></input>
        <button ng-click="addNotification(newNotification)">send</button>
        <div ng-repeat="notification in notifications">
            <h2>{{notification.type}} {{notification.message}}<button ng-click="removeNotification(notification)">delete</button>
            </h2>  
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angularFire/0.2.0/angularfire.min.js"></script>
<script>
angular.module('myApp',['firebase']);
    
function NotificationsCtrl($scope, angularFireCollection) {
	var url = 'https://unrulydisplay.firebaseio.com/notifications';
	$scope.notifications = angularFireCollection(url);
	$scope.newNotification = {
		type:'notification type',
		message:'Notification message'
	};
    
    $scope.notificationTypes = ['flag', 'gift', 'info-sign', 'tasks', 'envelope', 'wrench', 'user', 'off', 'fire'];

	$scope.addNotification = function(notification) {
		$scope.notifications.add(notification);
	};
	$scope.removeNotification = function(notification) {
		$scope.notifications.remove(notification);
	};
}
</script>