Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A simple AngularJS application to add / delete / list / sort data comprising of three fields (state code, price and tax). It was written to demonstrate to a friend, the simplicity and power of Angular to address programming challenges - in recruitment processes - quickly and effectively.
<!DOCTYPE html>
<html ng-app>
<head>
<title>Add / List Data (AngularJS)</title>
<style>
.list_data { margin-bottom: 2rem }
table, th, td { border: 1px solid #AAA }
th { cursor: pointer }
</style>
</head>
<body ng-controller="RecordCtrl">
<div class="list_data">
<h1>List Data</h1>
<table>
<tr>
<th ng-click="type = 'include'; reverse = !reverse">Status</th>
<th ng-click="type = 'state'; reverse = !reverse">State</th>
<th ng-click="type = 'price'; reverse = !reverse">Price</th>
<th ng-click="type = 'tax'; reverse = !reverse">Tax</th>
<th>Action</th>
</tr>
<tr ng-repeat="record in records | orderBy:type:reverse">
<td><input type="checkbox" ng-model="record.include"></td>
<td>{{record.state | uppercase}}</td>
<td>{{record.price | currency}}</td>
<td>{{record.tax | currency}}</td>
<td><button ng-click="Delete($index)">Delete</button></td>
</tr>
<tr>
<td colspan="2">Total</td>
<td>{{Totals().price | currency}}</td>
<td>{{Totals().tax | currency}}</td>
<td>&nbsp;</td>
</tr>
</table>
<button ng-show="history.length > 0" ng-click="Undo()">Undo Delete</button>
</div>
<div class="add_data">
<h1>Add Data</h1>
<form ng-submit="Add()">
<div class="field">
<label for="state">State: </label>
<input id="state" type="text" placeholder="State" maxlength="2" ng-model="newState">
</div>
<div class="field">
<label for="price">Price: </label>
<input id="price" type="number" placeholder="Price" min="0" ng-model="newPrice">
</div>
<div class="field">
<label for="tax">Tax: </label>
<input id="tax" type="number" placeholder="Tax" min="0" ng-model="newTax">
</div>
<div class="action">
<button type="submit">Add</button>
<button ng-click="Reset()">Reset</button>
</div>
</form>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.min.js"></script>
<script>
function RecordCtrl ($scope) {
// Historical data
$scope.history = [];
// Default data (can be loaded from a database)
$scope.records = [
{ state: 'CA', price: 22, tax: 5, include: false },
{ state: 'MA', price: 32, tax: 8, include: false }
];
// Total prices
$scope.Totals = function () {
var priceTotal = 0;
var taxTotal = 0;
// Loop through main records and calculate aggregate prices and taxes if include is true
angular.forEach($scope.records, function (record) {
if (record.include) {
priceTotal += record.price;
taxTotal += record.tax;
}
});
// Return aggregate data
return { price: priceTotal , tax: taxTotal };
};
// Delete data
$scope.Delete = function (index) {
// Remove first / oldest element from history if it reaches maximum capacity of 10 records
if ($scope.history.length === 10)
$scope.history.shift();
// Add deleted record to historical records
$scope.history.push($scope.records[index]);
// Remove from main records (using index)
$scope.records.splice(index, 1);
};
// Reset new data model
$scope.Reset = function () {
$scope.newState = '';
$scope.newPrice = 0;
$scope.newTax = 0;
}
$scope.Reset();
// Add new data
$scope.Add = function () {
// Do nothing if no state is entered (blank)
if (!$scope.newState)
return;
// Add to main records
$scope.records.push({
state: $scope.newState,
price: $scope.newPrice,
tax: $scope.newTax,
include: false
});
// See $Scope.Reset...
$scope.Reset();
}
// Undo action (delete)
$scope.Undo = function () {
// Add last / most recent historical record to the main records
$scope.records.push($scope.history[ $scope.history.length - 1 ]);
// Remove last / most recent historical record
$scope.history.pop();
}
}
</script>
</body>
</html>
@jeanphill

This comment has been minimized.

Copy link

jeanphill commented Aug 3, 2016

hchvjhkjk

@sulaish

This comment has been minimized.

Copy link

sulaish commented Jul 31, 2017

ghdghfs

@1jacobb1

This comment has been minimized.

Copy link

1jacobb1 commented Aug 15, 2017

sadfsdafdsa

@eleveraviraj

This comment has been minimized.

Copy link

eleveraviraj commented Nov 28, 2017

L-K-B

@tahseennbd

This comment has been minimized.

Copy link

tahseennbd commented Dec 6, 2017

hhjh

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.