Base Angular 1.1.4 Fiddle

AngularJS 1.1.4 Includes jQuery http://stackoverflow.com/questions/16888171/how-to-implement-gmail-compose-window-concept-in-single-page-applications/16890067#16890067

by rajeshpillai

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller='MainController'>
    <button ng-click="startAdd()">Add Item</button>
    <ul>
      <li ng-repeat="item in items">
        <a href='' ng-click="item.showing = !item.showing">
          {{item.name}}, {{item.publisher}}
        </a>
        <div ng-show="item.showing" class='description'
          ng-bind-html-unsafe="item.description"></div>
      </li>
    </ul>
    <form ng-show="adding" class="add-window" ng-submit="addItem()">
      <div class='header'>Add a Book</div>
      <div class='inner'>
        <div>
          <label>Name: </label>
          <input type="text" ng-model="newItem.name" required>
        </div>
        <div>
          <label>Publisher: </label>
          <input type="text" ng-model="newItem.publisher" required>
        </div>
        <div>
          <label>Description: </label>
          <textarea ng-model="newItem.description"></textarea>
        </div>
        <div class='button-bar'>
          <input type="submit" value="Add">
          <button type="button" ng-click="cancelAdd()">Cancel</button>
        </div>
      </div>
    </form>
  </div>
</div>

CSS

.add-window {
  min-width: 350px;
  position: fixed;
  bottom: 0px;
  right: 10px;
  border: 1px solid black;
  background-color: white;
}

.add-window .header {
  background-color: #333;
  color: white;
}

.add-window div {
  padding: 5px 20px;
}

.description {
  margin: 10px 0;
}

label {
  display: inline-block;
  width: 100px;
  text-align: right;
  vertical-align: top;
}

.button-bar {
  text-align: right;
}

input[type=text] {
  width: 200px;
}

textarea {
  width: 200px;
  height: 100px;
}

JavaScript

// Base AngularJS 1.1.4 Fiddle + jQuery
// http://stackoverflow.com/questions/16888171/how-to-implement-gmail-compose-window-concept-in-single-page-applications/16890067#16890067

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

app.controller('MainController', function($scope, books) {
  $scope.startAdd = function() {
    $scope.newItem = { name: '', publisher: '', description: '' };
    $scope.adding = true;
  };

  $scope.items = angular.copy(books);    
  $scope.addItem = function() {
    $scope.adding = false;
    var newItem = angular.copy($scope.newItem);
    newItem.description = newItem.description.replace(/\n/g, '<br>');
    newItem.description = "<p>" + newItem.description + "</p>";
    $scope.items.push(newItem);
  };

  $scope.cancelAdd = function() {
    $scope.adding = false;
  };
});

// Some starter data to make the window scroll when opened.
app.value("books", [
  {
    name: 'AngularJS in Action',
    publisher: 'Manning',
    description: "<p>AngularJS in Action covers everything you need to know to get started with the AngularJS framework. As you read, you'll explore all the individual components of the framework and learn how to customize and extend them. You'll discover the emerging patterns for web application architecture and tackle required tasks like communicating with a web server back-end. Along the way, you'll see AngularJS in action by building real world applications with thoroughly-commented code.</p><p>AngularJS in Action covers everything you need to know to get started with the AngularJS framework. As you read, you'll explore all the individual components of the framework and learn how to customize and extend them. You'll discover the emerging patterns for web application architecture and tackle required tasks like communicating with a web server back-end. Along the way, you'll see AngularJS in action by building real world applications with thoroughly-commented code.</p>",
    showing: true
  },
  {
    name: 'Instant AngularJS...