Angular Counting & Totaling

Angular Counting & Totaling.markdown

Angular Counting & Totaling

Angular Counting & Totaling tool. Placed in simple Bootstrap.

Styled version of this Plnkr: http://plnkr.co/edit/WCrvWl471AMqjyq1yl3m?p=preview

A Pen by Jeremy Hawes on CodePen.

License.

index.html

div.container.counter
	.row
		.col-sm-4.col-sm-offset-4.well
			h4 Angular Counting & Totaling
			.single(ng-repeat='item in itemList')
				p.item {{item.name}}
				p.quantity {{item.quantity}}
				a.button.add(ng-click='increaseItemCount(item)') +
				a.button.subtract(ng-click='decreaseItemCount(item)') -
			p.total TOTAL
			p.calc(ng-bind='sumCalc()')

script.js

// Just for codepen - add manually outside of this application
$('html').attr('ng-app', 'counter');
$('body').attr('ng-controller', 'MainCtrl');

// All the stuff worth keeping
var app = angular.module('counter', []);

app.controller('MainCtrl', function($scope) {
		$scope.itemList = [{
				"name": "item1",
				"quantity": "0"
		}, {
				"name": "item2",
				"quantity": "0"
		}, {
				"name": "item3",
				"quantity": "0"
		}];
		$scope.increaseItemCount = function(item) {
				item.quantity++;
		};
		$scope.decreaseItemCount = function(item) {
				if (item.quantity > 0) {
						item.quantity--;
				}

		};
		$scope.sumCalc = function() {
				var sum = 0;
				angular.forEach($scope.itemList, function(item, index) {
						sum += parseInt(item.quantity, 10);
				});
				return sum;
		};
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>

style.css

@import "compass"
body
	padding: 20px
.counter
	text-align: center
	.single
		padding-bottom: 10px
		border: solid 2px #ccc
		margin-bottom: 10px
		+border-radius(4px)
		.item
			background: #ccc
			padding: 4px 0
			border-top-right-radius: 3px
			border-top-left-radius: 3px
		.quantity
			font-size: 20px
		.button
			background: #999
			display: inline-block
			text-align: center
			width: 30px
			height: 30px
			font-size: 18px
			font-weight: bold
			color: #fff
			text-shadow: 0 1px 1px #333
			border: solid 1px #555
			+box-shadow(inset 0 1px 1px rgba(255,255,255,0.5), inset 0 -1px 1px rgba(0,0,0,0.5))
			+border-radius(50%)
			+transition(all 100ms ease-in-out)
			&.add
				margin-right: 4px
			&:hover
				background: #555
				cursor: pointer
				text-decoration: none
				+transition(all 100ms ease-in-out)
.total
	margin-top: 20px
	font-size: 16px
	background: #555
	color: #fff
	padding: 4px 0
	+border-radius(4px)
.calc
	font-size: 26px
			

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />