Angularjs Detailed Example

by jacobwsmith

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<div class="content">    
    <h1>Angular Test</h1>
	<p>Test includes the following:</p>
	<ul>
		<li>Data binding to obj (COMPLETE)</li>
		<li>Use of multiple dialog boxes (COMPLETE)</li>
		<li>Validation on price and quantity (COMPLETE)</li>
		<li>Ajax loading data (COMPLETE)</li>
		<li>Use of templates w/ resolve (COMPLETE)</li>
		<li>With use of loading animation (PENDING)</li>
	</ul>
	<hr>
	<div ng-app="App">

		<!-- TEMPLATE -->
        <script type="text/ng-template" id="/editor-tpl.html">	
			
			<p><input type="Button" value="Add New Item" ng-click="addDialog()" /></p>
			<table border="1">
				<thead>
					<tr>
						<td>Name</td>
						<td>Price</td>
						<td>Quantity</td>
                        <td>Remove Item</td>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="item in items">
						<td>{{item.Name}}</td>
						<td>{{item.Price}}</td>
						<td>{{item.Quantity}}</td>
						<td><input type="button" value="Remove" ng-click="removeItem($index)" /></td>
					</tr>
				</tbody>
				<tfoot>
					<tr>
						<td>Totals: </td>
						<td>{{priceColumn()}}</td>
						<td>{{quantityColumn()}}</td>
						<td></td>
					</tr>
				</tfoot>
			</table>
			<p>Total Price: {{totalPrice()}}</p>
			
			<!-- HIDDEN FORM THAT GETS ADDED TO THE JQUERY DIALOG -->
			<!-- not sure if this is the best way -->
			<form id="myform" name='myform' ng-init="step = 1">
				<table>
					<tr>
						<td>Name: </td>
						<td><input type="text" name="name" ng-model="item.Name" required error="Name is required" /></td>
					</tr>
					<tr>
						<td>Price: </td>
						<td><input type="number" name="price" ng-model="item.Price" required error="Price is required and must be a number" /></td>
					</tr>
					<tr>
						<td>Quantity: </td>
						<td><input type="number" name="quanitity" ng-model="item.Quantity"...

CSS

.content {
	font: Arial, Helvetica, sans-serif;
}
table
{
    border-collapse: collapse;
    border-spacing: 0;
}
table td
{
    padding: 8px 8px;
}

.boldText { font-weight:bold; }

/* angular validation error */
.ng-invalid.ng-dirty {color: red;}

#myform{
	display: none;
}
table tfoot, table thead{
	background-color: #ccc;
}
input{
	cursor: pointer;
}

/*! jQuery UI - v1.10.0 - 2013-01-29
* http://jqueryui.com
* Includes: jquery.ui.core.css, jquery.ui.resizable.css, jquery.ui.selectable.css, jquery.ui.accordion.css, jquery.ui.autocomplete.css, jquery.ui.button.css, jquery.ui.datepicker.css, jquery.ui.dialog.css, jquery.ui.menu.css, jquery.ui.progressbar.css, jquery.ui.slider.css, jquery.ui.spinner.css, jquery.ui.tabs.css, jquery.ui.tooltip.css
* To view and modify this theme, visit...

JavaScript

//// Items Controller ////
function ItemsCtrl($scope, datasets){

	// the result of $http() contains
    // .data, .status, .headers, .config
    $scope.items = datasets.data.items;

	$scope.addItem = function(item) {
		console.log('addItem');
		var $dialog;
		if ($scope.myform.$valid) {
			$scope.items.push(item);
			$scope.item = {};
			$scope.$dialog.dialog("close");
		} else {
			// Loop through errors to display in dialog
			var msg = 'Please correct the following errors:',
				totalErrors = $('#myform .ng-invalid').length;

			for (var i = 0; i < totalErrors; i++) {
				msg += '<br> - ' + $('#myform .ng-invalid')[i].attributes.error.nodeValue;
			}
			$dialog = $('<div>').attr('id', 'dialog').addClass('dialog').html(msg);
			$dialog.dialog({
				close: function(event, ui) {
					$dialog.dialog("destroy");
				},
				title: 'ERROR',
				resizable: false,
				width: 350,
				height: 'auto',
				minHeight: 150,
				modal: true,
				position: {
					my: "center",
					at: "center",
					of: window
				},
				buttons: [{
						text: 'Ok',
						click: function() {
							$(this).dialog("close");
						}
					}
				]
			});
		}

	};
	$scope.removeItem = function(index) {
		console.log('removeItem');
		$scope.items.splice(index, 1);
	};
	$scope.addDialog = function(){
		console.log('addDialog');
		$scope.$dialog = $('#myform');
		$scope.$dialog.dialog({
			title : 'Insert Item',
			resizable : false,
			width : 550,
			height: 'auto',
			minHeight: 150,
			modal : true,
			position : {
				my: "center", at: "center", of: window
			}
		});
	};
	$scope.priceColumn = function() {
		var total = 0;
		for (count = 0; count < $scope.items.length; count++) {
			total += Number($scope.items[count].Price);
		}
		return total;
	};
	$scope.quantityColumn = function() {
		var total = 0;
		for (count = 0; count < $scope.items.length; count++) {
			total += Number($scope.items[count].Quantity);
		}
		return total;
	};
	$scope.totalPrice = function() {
		var total = 0;
		for...