Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app="Chat">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
  
<body ng-controller="ChatCtrl">
  
  <h1>Leave message:</h1>
  <form>
    <div class='hint'>Click &lt;Enter&gt; to submit :)</div>
    <textarea
      cols="30"
      rows="5"
      ng-model="message"
      enter-submit='add()'
    ></textarea>
    <br />
    <button type="submit" ng-click="add()">Send message!</button>
  </form>
  
  <h3>Messages list:</h3>
  <table>
    <tr>
      <th>Text</th>
      <th>Date</th>
    </tr>
    <tr ng-repeat="message in messages">
      <td class='text'>{{message.text}}</td>
      <td class='date'>{{message.datetime | date:"HH:mm:ss"}}</td>
    </tr>
  </table>
  
</body>
</html>
​
 
td.text {
  width: 200px;
}
​
td.date {
  text-align: right;
  width: 50px;
}
​
.hint {
  color: #a0a0a0;
  font-style: italic;
}
 
angular.module('Chat', [])
  .directive('enterSubmit', function () {
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        var submit;
​
        $(element).on({
          keydown: function (e) {
            submit = false;
​
            if (e.which === 13 && !e.shiftKey) {
              submit = true;
              e.preventDefault();
            }
          },
​
          keyup: function () {
            if (submit) {
              scope.$eval( attrs.enterSubmit );
​
              // flush model changes manually
              scope.$digest();
            }
          }
        });
      }
    };
  });
​
function ChatCtrl($scope) {
  $scope.messages = [{
    text: 'Sample Message',
    datetime: new Date()
  }];
  
  $scope.add = function () {
    $scope.messages.push({
      text: $scope.message,
      datetime: new Date()
    });
    $scope.message = '';
  };
  
  $scope.message = '';
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
invispro
0viewers