Created
May 13, 2015 04:44
-
-
Save owenl131/ca62a0838576179d819f to your computer and use it in GitHub Desktop.
// source http://jsbin.com/holiga
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html ng-app="myApp"> | |
<head> | |
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> | |
<script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script> | |
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script> | |
<link rel="stylesheet" href="/resources/tutorial/css/example.css" /> | |
</head> | |
<body ng-controller="MyController" style="font-family:verdana"> | |
<div class="chat container"> | |
<header>420Glitches Group Chat</header> | |
<div class="chat-toolbar"> | |
<label for="nameInput">Username:</label> | |
<select ng-model="name"> | |
<option value="Owen L ">Owen L </option> | |
<option value="Kai Jun ">Kai Jun </option> | |
<option value="Yuan Wei ">Yuan Wei </option> | |
</select> | |
</div> | |
<ul id="example-messages" class="example-chat-messages"> | |
<li ng-repeat="msg in messages"> | |
<strong class="example-chat-username">{{ msg.from }}</strong>- | |
{{ msg.body }} | |
</li> | |
</ul> | |
<footer> | |
<input ng-model="msg" ng-keydown="addMessage($event)" type="text" id="messageInput" placeholder="Type a message..." size="30"> | |
</footer> | |
</div> | |
<script> | |
var myApp = angular.module("myApp", ["firebase"]); | |
myApp.controller("MyController", ["$scope", "$firebaseArray", | |
function($scope, $firebaseArray) { | |
var ref = new Firebase("https://420glitches.firebaseio.com/"); | |
$scope.messages = $firebaseArray(ref); | |
$scope.addMessage = function(e) { | |
if (e.keyCode === 13 && $scope.msg) { | |
var name = $scope.name; | |
$scope.messages.$add({ | |
from: name, | |
body: $scope.msg | |
}); | |
$scope.msg = ""; | |
} | |
} | |
} | |
]); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment