Angularjs a small chat example with display only latest 5 messages:
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.7.0.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-app="ngChatApp" ng-controller="ChatCtrl">
<div id="message_placeholder">
<div ng-repeat="message in a">
{{ message.from }}: {{ message.msg }}
</div>
</div>
<form ng-submit="addMessage()">
<input type="text"
ng-model="username"
placeholder="Your name" />
<input type="text"
ng-model="message"
placeholder="Your message" />
<input type="submit"
value="Send" />
</form>
</div>
</body>
</html>
<script>
angular.module('ngChatApp', [])
.controller('ChatCtrl', function($scope) {
var maxMessages = 5;
$scope.a = [];
$scope.addMessage = function() {
$scope.a.push({
from: $scope.username,
msg: $scope.message
});
if ($scope.a.length > maxMessages)
$scope.a.splice(0,1);
}
});
</script>
screen shot:
No comments:
Post a Comment