Truc 1 : Simple Facture Dynamique Angular

Introduction :


Une simple facture dynamique que l’on peut transformer en pleins de choses.

 

Le Code :



<html ng-app="magasin">
	<head>
		<meta charset="iso-8859-15" >
		<!-- -----------------------------------------------DEBUT DU CHARGEMENT DES LIBRAIRIES------------------------ -->
		<!--	APPEL LIB ANGULAR -->
		<script	type="text/javascript" 	src="angular-1.3.13/angular.min.js"></script>
		<script src="angular-filter.min.js"></script>

		<!--	APPEL LIB JQUERY -->
		<script	type="text/javascript" 	src="librairies/jquery.js"></script>
		<!--	APPEL LIB JQUERY UI ( look sympa du programme) -->
		<script type="text/javascript" 	src="librairies/jquery-ui.min.js"				></script>
			<link 	href="librairies/jquery-ui.css" rel="stylesheet" type="text/css" 	/>
		<script type="text/javascript" 	src="librairies/jquery.dialogextend.js"		></script>

		<!-- BOOTSTRAP -->
		<!-- CSS -->
			<link rel="stylesheet" href="bootstrap.min.css">
		<!-- Theme optionnel -->
			<link rel="stylesheet" href="bootstrap-theme.css">
		<!-- JavaScript -->
		<script src="bootstrap.min.js"></script>
		<!-- ----------------------------------------------FIN DU CHARGEMENT DES LIBRAIRIES------------------------ ----->
		<script>

			var monAppli = angular.module('magasin',['angular.filter']);

			monAppli.controller("Controleur", function ($scope) {

					$scope.facture = {
						Objets: [{
							qty: 10,
							description: 'Objet',
							cout: 9.95}]
					};

					$scope.addObjet = function() {
						$scope.facture.Objets.push({
							qty: 1,
							description: '',
							cout: 0
						});
					},

					$scope.removeObjet = function(index) {
						$scope.facture.Objets.splice(index, 1);
					},

					$scope.total = function() {
						var total = 0;
						angular.forEach($scope.facture.Objets, function(Objet) {
							total += Objet.qty * Objet.cout;
						})

						return total;
					}

				<!--  Fin du Controleur Angular -->
				});

		</script>
	</head>

<body ng-controller='Controleur' >
<h2>Facture</h2>
<div ng-controller="Controleur">
<table class="table">
<tr>
<th>Description</th>
<th>Qty</th>
<th>cout</th>
<th>Total</th>
<th></th>
</tr>
<tr ng-repeat="Objet in facture.Objets">
<td><input type="text" ng-model="Objet.description"class="input-small"></td>
<td><input type="number" ng-model="Objet.qty" ng-required class="input-mini"></td>
<td><input type="number" ng-model="Objet.cout" ng-required class="input-mini"></td>
<td>{{Objet.qty * Objet.cout | currency}}</td>
<td>
						[<a href ng-click="removeObjet($index)">X</a>]</td>
</tr>
<tr>
<td><a href ng-click="addObjet()" class="button btn-small">Ajouter Objet</a></td>
<td></td>
<td>Total:</td>
<td>{{total() | currency}}</td>
</tr>
</table>
</div>
</body>
</html>

<style>
.button {
   border-top: 1px solid #f797e9;
   background: #d66574;
   background: -webkit-gradient(linear, left top, left bottom, from(#e3aa39), to(#d66574));
   background: -webkit-linear-gradient(top, #e3aa39, #d66574);
   background: -moz-linear-gradient(top, #e3aa39, #d66574);
   background: -ms-linear-gradient(top, #e3aa39, #d66574);
   background: -o-linear-gradient(top, #e3aa39, #d66574);
   padding: 11px 30px;
   -webkit-border-radius: 16px;
   -moz-border-radius: 16px;
   border-radius: 16px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #ffffff;
   font-size: 20px;
   font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border-top-color: #785128;
   background: #785128;
   color: #fff0ff;
   }
.button:active {
   border-top-color: #b52f6b;
   background: #b52f6b;
   }

</style>

 

 

 

Publicités