<html ng-app="customerApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="CustomerController">
<h1>Customer Registration Form</h1>
<form name="customerForm" novalidate>
<label for="name">Name:</label>
<input type="text" id="name" name="name" ng-model="customer.name" required>
<label for="contact">Contact No.:</label>
<input type="tel" id="contact" name="contact" ng-model="customer.contact" required>
<label>Gender:</label>
<input type="radio" id="male" name="gender" ng-model="customer.gender" value="Male"> Male
<input type="radio" id="female" name="gender" ng-model="customer.gender" value="Female"> Female
<label for="favoriteItem">Favorite Item:</label>
<select id="favoriteItem" name="favoriteItem" ng-model="customer.favoriteItem" required>
<option value="" disabled>Select an item</option>
<option ng-repeat="item in items" value="{{ item }}">{{ item.name }} (Qty: {{ item.quantity }})</option>
</select>
<label for="suggestions">Suggestions:</label>
<textarea id="suggestions" name="suggestions" ng- model="customer.suggestions"></textarea>
<button type="button" ng-click="calculateBill()">Submit</button>
</form>
<div ng-show="showBill">
<h2>Bill</h2>
<p>Total items selected: {{ customer.favoriteItem.quantity }}</p>
<p>Total amount to be paid: {{ customer.favoriteItem.quantity * customer.favoriteItem.price | currency }}</p>
</div>
<script>
var app = angular.module('customerApp', []);
app.controller('CustomerController', function ($scope, $filter) {
$scope.items = [
{ name: 'Item A', quantity: 3, price: 10 },
{ name: 'Item B', quantity: 5, price: 15 },
{ name: 'Item C', quantity: 2, price: 20 }
// Add more items as needed
];
$scope.showBill = false;
$scope.customer = {};
$scope.calculateBill = function () {
$scope.showBill = true;
};
});
</script>
</body>
</html>
No comments:
Post a Comment