Truc 2 : Autocomplétion Google avec Angular et ngAutoComplete.

Introduction :


Petite librairie ngAutoComplete permettant l’autocomplétion Google dans des champs input: A tester ici 

Idéal à intégrer dans un projet.

Autres liens :

https://developers.google.com/maps/documentation/javascript/places-autocompletehttps://developers.google.com/maps/documentation/javascript/places-autocomplete

Le Code




<html ng-app="Test">
<head>

    <meta charset="utf8" >
	<script	type="text/javascript" 	src="angular-1.3.13/angular.min.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css"href="style.css">
    
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
    <script src="script.js"></script>
    <script src="librairies/ngAutocomplete.js"></script>
  
  
</head>

<body>

<div ng-controller="TestCtrl">

<form id="form" role="form">

    <div class="form-group move-down">
        <label for="Autocomplete">Autocompletion Générique</label>
        <input type="text" id="Autocomplete" class="form-control" ng-autocomplete ng-model="result1" />
    </div>
    <div>resultat: {{result1}}</div>


    <div class="form-group move-down">
        <label for="Autocomplete">Autocompletion - Villes de France ou département</label>
        <input type="text" id="Autocomplete" class="form-control" ng-autocomplete ng-model="result2" details="details2" options="options2"/>
    </div>
    <div>resultat: {{result2}}</div>
    
    <div class="form-group move-down">
        <label for="Autocomplete">Autocompletion - Entreprises de France</label>
        <input type="text" id="Autocomplete" class="form-control" ng-autocomplete ng-model="result3" details="details3" options="options3"/>
    </div> 
     <div>resultat: {{result3}}</div>
</form>
</div>


</body>
</html>

<script>
angular.module( "Test", ['ngAutocomplete'])
  .controller("TestCtrl",function ($scope) {

    $scope.result1 = 'Entrez une recherche';
    $scope.options1 = null;
    $scope.details1 = '';

$scope.modd

    $scope.result2 = '';
    $scope.options2 = {
      country: 'fr',
      types: 'geocode'
      
    };    $scope.details2 = '';
    
    
    
    $scope.result3 = '';
    $scope.options3 = {
      country: 'fr',
	  
      types: 'establishment'
    };
    $scope.details3 = '';
  });
</script>

Publicités

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>