Creative AngularJS Order Form Example

AngularJS Order Form – Tutorial

Hello friends. Today I am going to show you how to make a creative angularjs order form. To develop this application, we have used HTML, CSS, Script.js and Angular JS.

In this example, we will code an order form with a total price updated in real time, using another one of Angular’s useful features – filters. Filters let you modify models and can be chained together using the pipe character |. In the example below, I am using the currency filter, to turn a number into a properly formatted price, complete with a dollar sign and cents.

FINAL OUTPUT:

STEP 1:

Create a ‘index.html’ file to make the frontend of the order form.

[code]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Learn AngularJS Order Form – Meul Tech </title>
<link href="http://fonts.googleapis.com/css?family=Cookie|Open+Sans:400,700" rel="stylesheet" />
<!– The main CSS file –>
<link href="style.css" rel="stylesheet" />
<!–[if lt IE 9]><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22http%3A%2F%2Fhtml5shiv.googlecode.com%2Fsvn%2Ftrunk%2Fhtml5.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /><![endif]–></head>
<!– Declare a new AngularJS app and associate the controller –>
<body ng-app ng-controller="OrderFormController">
<form>
<h1>Services</h1>
<ul><!– Loop through the services array, assign a click handler, and set or remove the "active" css class if needed –>
<li ng-repeat="service in services" ng-click="toggleActive(service)" ng-class="{active:service.active}">
<!– Notice the use of the currency filter, it will format the price –>{{service.name}} <span>{{service.price | currency}}</span></li></ul>
<div class="total"><!– Calculate the total price of all chosen services. Format it as currency. –>Total: <span>{{total() | currency}}</span></div></form>
<h3>By <a href="https://www.mehulprajapati.com">Meul Tech </a></h3>
<!– Include AngularJS from Google’s CDN –>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.0.7%2Fangular.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22script.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</body>
</html>
[/code]

STEP 2:

Now create a javascript file ‘script.js’ and make the frontend of the order form application.

[code]
function OrderFormController($scope){

// Define the model properties. The view will loop
// through the services array and genreate a li
// element for every one of its items.

$scope.services = [
{
name: ‘Tutorials Development’,
price: 500,
active:true
},{
name: ‘Tutorials Design’,
price: 300,
active:false
},{
name: ‘Code Integration’,
price: 250,
active:false
},{
name: ‘Training’,
price: 220,
active:false
}
];

$scope.toggleActive = function(s){
s.active = !s.active;
};

// Helper method for calculating the total price

$scope.total = function(){

var total = 0;

// Use the angular forEach helper method to
// loop through the services array:

angular.forEach($scope.services, function(s){
if (s.active){
total+= s.price;
}
});

return total;
};
}

[/code]

STEP 3:

Next create a style.css file to give beautiful design to our form.

[code]
/*————————-
Simple reset
————————–*/

*{
margin:0;
padding:0;
}

/*————————-
General Styles
————————–*/

body{
font:15px/1.3 ‘Open Sans’, sans-serif;
color: #5e5b64;
text-align:center;
margin-top: -77px;
}

a, a:visited {
outline:none;
color:#389dc1;
}

a:hover{
text-decoration:none;
}

section, footer, header, aside, nav{
display: block;
}

/*————————-
The order form
————————–*/

form{
background-color: #61a1bc;
border-radius: 2px;
box-shadow: 0 1px 1px #ccc;
width: 400px;
padding: 35px 60px;
margin: 80px auto;
}

form h1{
color:#fff;
font-size:64px;
font-family:’Cookie’, cursive;
font-weight: normal;
line-height:1;
text-shadow:0 3px 0 rgba(0,0,0,0.1);
}

form ul{
list-style:none;
color:#fff;
font-size:20px;
font-weight:bold;
text-align: left;
margin:20px 0 15px;
}

form ul li{
padding:20px 30px;
background-color:#e35885;
margin-bottom:8px;
box-shadow:0 1px 1px rgba(0,0,0,0.1);
cursor:pointer;
}

form ul li span{
float:right;
}

form ul li.active{
background-color:#8ec16d;
}

div.total{
border-top:1px solid rgba(255,255,255,0.5);
padding:15px 30px;
font-size:20px;
font-weight:bold;
text-align: left;
color:#fff;
}

div.total span{
float:right;
}
[/code]

Finally our code is ready to run. You will get a creative angularjs order form. Thanks for reading this tutorial.

Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends because “You share, I share, let’s make the world aware”.

You may want to take a look at the following related posts:

Also for more awesome tutorials, please don’t forget to like our facebook page Meul Tech .

Bonus: We also give training on following topics:

1. Angular Training in Mumbai.

2. Bootstrap Training Course in Mumbai.

3. Web Designing Training in Mumbai.

4. UI / UX Training.

5. IOS Training Institute in Mumbai.

Tags: AngularJS