employee/employee.web-js/src/main/webapp/employee/edit.html

<!-- 
/*******************************************************************************
 * Copyright (c) 2010-2013 Oracle. All rights reserved.
 * This program and the accompanying materials are made available under the 
 * terms of the Eclipse Public License v1.0 and Eclipse Distribution License v. 1.0 
 * which accompanies this distribution. 
 * The Eclipse Public License is available at http://www.eclipse.org/legal/epl-v10.html
 * and the Eclipse Distribution License is available at 
 * http://www.eclipse.org/org/documents/edl-v10.php.
 *
 * Contributors:
 *  shsmith - EclipseLink 2.4
 ******************************************************************************/
 -->

<div class="row-fluid">
	<div class="span6 offset1">
		<div class="row-fluid" ng-show="error">
			<h3 class="form-h3">Employee</h3>
			<div class="alert alert-error">{{error}}</div>
			<a href='#/home' class='btn'>Ok</a>
		</div>
		<div ng-hide="error">
			<div class="row-fluid">
				<h3 class="form-h3">
					Employee
					<div class="button-group">
						<button class='btn' ng-click='save()'>Save</button>
						<button class='btn' ng-show='removeEnabled' ng-click='remove()'>Delete</button>
						<a href='#/home' class='btn'>Cancel</a>
					</div>
				</h3>
			</div>

			<div class="row-fluid">
				<form class="form-horizontal">
					<div class="control-group">
						<label class="control-label">Id</label>
						<div class="controls">
							<input type="text" ng-model='employee.id' disabled />
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">First Name</label>
						<div class="controls">
							<input type="text" ng-model='employee.firstName' />
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">Last Name</label>
						<div class="controls">
							<input type="text" ng-model='employee.lastName' />
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">Gender</label>
						<div class="controls">
							<select ng-model="employee.gender">
								<option value="Female">Female</option>
								<option value="Male">Male</option>
							</select>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">Salary</label>
						<div class="controls">
							<div class="input-prepend">
								<span class="add-on">$</span> <input type="text"
									ng-model='employee.salary' />
							</div>
						</div>
					</div>
				</form>
			</div>
			<div class="row-fluid">
				<h4 class="form-h4">
					Address
					<button class="button-group btn btn-small" ng-hide='address'
						ng-click='addAddress()'>Add</button>
				</h4>
			</div>
			<div class="row-fluid" ng-show="address">
				<form class="form-horizontal">
					<div class="control-group">
						<label class="control-label">Street</label>
						<div class="controls">
							<input type="text" ng-model='address.street' />
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">City</label>
						<div class="controls">
							<input type="text" ng-model='address.city' />
						</div>
					</div>
					<div class="control-group">
						<label class="control-label">Country</label>
						<div class="controls">
							<input type="text" ng-model='address.country' />
						</div>
					</div>
					<div class="control-group">
						<div class="controls">
							<button class='btn btn-small' ng-show='address'
								ng-click='removeAddress()'>Remove</button>
						</div>
					</div>
				</form>
			</div>
			<div class="row-fluid">
				<h4 class="form-h4">
					Phone Numbers
					<button class="button-group btn btn-small" ng-click='addPhone()'>Add</button>
				</h4>
			</div>
			<div class="row-fluid" ng-show='phoneNumbers.length'>
				<form class="form-horizontal">
					<div ng-repeat='phoneNumber in phoneNumbers'>
						<div class="control-group">
							<label class="control-label">Type</label>
							<div class="controls">
								<input type="text" ng-model='phoneNumber.type' />
							</div>
						</div>
						<div class="control-group">
							<label class="control-label">Area Code</label>
							<div class="controls">
								<input type="text" ng-model='phoneNumber.areaCode' />
							</div>
						</div>
						<div class="control-group">
							<label class="control-label">Number</label>
							<div class="controls">
								<input type="text" ng-model='phoneNumber.number' />
							</div>
						</div>
						<div class="control-group">
							<div class="controls">
								<button class='btn btn-small' ng-click='removePhone($index)'>Remove</button>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
	<div class="span4">
		<div class="aside">
			<img src='resources/images/eclipselink-logo.png' alt='EclipseLink'
				title='EclipseLink Employee Example' />
			<div class='commentary'>
				<h3>Creating and Updating Resources</h3>
				<p>Changes to resources are persisted with either a PUT or a
					POST.</p>
				<p>A PUT uses the URI of the resource and a payload containing
					the changed resource in either XML or JSON.</p>
				<p>A POST uses the URI of the resource type without the resource
					id. If the payload object doesn't contain an id one will be created
					by EclipseLink using the generation mechanism specified in the JPA
					mappings. If the payload object does have an id a POST will not use
					id generation.</p>
			</div>
		</div>
	</div>
</div>