Last active
October 19, 2022 09:42
-
-
Save MrSaints/8874103 to your computer and use it in GitHub Desktop.
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> </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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
L-K-B