[AngularJs 1.6] Afficher n appréciations sur double click sur une image ou une div, grâce aux coordonnées X et Y.

angularjsIntroduction



Un Petit code qui permet d’afficher autant d’inputs HTML que l’on veut sur une DIV lorsque l’on double clique n’importe ou dans la div.

Super utile pour tout type d’applications, (Santé, Localisation, Automobile etc ….) dans la mesure ou l’image de fond peut être par exemple un corps humain ou une carte.

On voit dans un premier temps comment faire apparaitre des champs HTML Inputs à loisir dans la DIV (Partie 1) avec du Jquery dans le controleur(déconseillé) , puis ensuite, dans la partie 2 le code devient du full angularJs pour permettre la sauvegarde et le rechargement du modèle de données intégral qui comprends toutes nos appréciations que l’on a créé en temps réel … On a également envie de supprimer l’appréciations que l’on veut ( Avec un icone Croix bootstrap…). Pour faire cette partie 2, il est nécessaire de refaire le code et d’utiliser un ng-repeat.

A tester ici.

Photo


xy.jpg

Explication sommaire du code (Partie 1 + Partie 2) :


Lorsqu’on double clique, l’évènement est passé en paramêtre à la fonction ajoutSurClick($event) . On récupère le x et le y puis on affiche notre appréciation au bon endroit avec un append ().

Le code (Partie 1) :


Tout d’abord Index.html qui fait aussi office de vue dans ce cas :


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Neutre</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <!-- CHARGEMENT DES LIBRAIRIES -->
    <!-- JQUERY ET BOOTSRAP -->
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" type="text/css">
    <!-- ANGULARJS -->
    <script src='bower_components/angular/angular.min.js'></script>
    <!-- APPLICATION PERSO -->
    <script src="js/app.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!-- FIN DE CHARGEMENT DES LIBRAIRIES -->
</head>

<body ng-app="neutre" ng-controller="neutreCtrl">
    <div class="container-fluid">
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                  <span class="sr-only">Toggle navigation</span>
                  </button>
                    <a class="navbar-brand" href="#">Neutre</a></div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"></div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
        <div class="row ">
            <div class="col-lg-12 ">
                <div class="panel panel panel-warning">
                    <div class="panel-heading">
                        <i class="fa fa-picture-o"></i>
                        <div class="box-tools pull-right">
                            <button class="btn btn-primary btn-sm pull-right" ng-model="collapsed" ng-click="collapsed=!collapsed" data-widget="collapse"><i class="fa fa-minus"></i></button></div>
                    </div>
                    <div ng-dblclick="ajoutSurClick($event)" ng-show="!collapsed" class="panel-body table-responsive" style="min-height:350px;" id="fenetre"></div>
                    <div class="panel-footer ">
                        <div class="form-group"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- FIN DE DIV GLOABLE FLUID -->
    </div>
</body>

</html>

Puis ensuite, le controleur ANGULARJS dans notre fichier app.js:

angular.module('neutre', [])

    .controller('neutreCtrl', function($scope, $document) {

            $scope.ajoutSurClick = function(event) {

                alert(event.offsetX + '  ' + event.offsetY);

                var mover = angular.element(' <
                    div > < button > Appreciation < /button><input></input > < /div>
                    ');
                    var x = event.offsetX + 'px';
                    var y = event.offsetY + 'px'; mover.css({
                        position: 'absolute',
                        top: y,
                        bottom: '0px',
                        left: x,

                        zIndex: '2'
                    });

                    angular.element('#fenetre').append(mover);
                }

                /* FIN DU CONTROLEUR */
            });

Partie 2 : Plus de Jquery, mais du full angularJs


Maintenant, voici la deuxième version, en AngularJS complet qui permet de supprimer les appréciations. On ajoute la photo d’un corps humain pour mieux comprendre le but aussi. On utilise plus de JQuery mais un ng-repeat dans la vue à la place, Les positions des inputs étant dans ng-style lors de chaque itérations du ng-repeat.

Pour tester l’app, c’est ici .

On constate là toute la simplicité de l’excellent framework angularJs, à absolument garder, qui permet de faire tout ce qui nous passe par la tête, sans prise de tête , et rapidement ( 30 minutes dans ce cas).

Photo de la micro app :


appreciations.jpg

La vue Index.html, elle a changé, on a mis un ng-repeat dedans qui affiche chaque appréciation avec sa position.

 


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Neutre</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
		<!-- CHARGEMENT DES LIBRAIRIES -->
		
		<!-- JQUERY ET BOOTSRAP -->
        <script src="bower_components/jquery/dist/jquery.min.js"></script>
        <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" type="text/css">
 
        <!-- ANGULARJS -->
        <script src='bower_components/angular/angular.min.js'></script>
		
		<!-- APPLICATION PERSO -->
		<script src="js/app.js"></script>
		<link rel="stylesheet" type="text/css" href="css/style.css">
		
		<!-- FIN DE CHARGEMENT DES LIBRAIRIES -->
  </head>

<body ng-app="neutre" ng-controller="neutreCtrl">
	<div class="container-fluid">
 
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                    </button>
                    <a class="navbar-brand" href="#">Neutre</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
	
	<div class="row ">
		<div class="col-lg-12 " >
			 <div class="panel panel panel-warning">
				
				<div class="panel-heading"> 
					<i class="fa fa-picture-o"></i> 
					<div class="box-tools pull-right">
						<button class="btn btn-primary btn-sm pull-right" ng-model="collapsed" ng-click="collapsed=!collapsed" data-widget="collapse"><i class="fa fa-minus"></i></button>
					</div>
				</div>
				
				<div ng-dblclick="ajoutSurDblClick($event)" ng-show="!collapsed" class="panel-body table-responsive" style="min-height:700px;" id="bg">
					<div ng-repeat="a in appreciations" >
						<div  ng-style="{'position': 'absolute','margin-top':a.y,'margin-left':a.x}"><button ng-click="supprimer($index)"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button><input ng-model="a.label" ></input></div>
					</div>
				
					
				</div>
				
				<div class="panel-footer text-right">
					<div class="form-group ">
					<button ng-click="sauver_appreciations()">Sauver Appreciations</button>
					</div> 
				</div>
				
			 </div>
		</div>
	</div>
		
	
	


	
	
	
	</div>
	
<!-- FIN DE DIV GLOABLE FLUID -->
</div>
	
</body>
</html>
<style>
#bg{
	background:url('img/modelFemme.png') no-repeat center center; margin-bottom:1px;
}
</style>

Le controleur, on voit que la fonction sauvegarder est déjà prête, il suffit d’envoyer le tableau d’objets JSON au Back END…

angular.module('neutre', [])

.controller('neutreCtrl', function($scope,$document) {
	
	$scope.appreciations =[]; // Les appréciations arrivent dans ce tableau en temps réel, ce sont des objets JSON

	$scope.supprimer = function($index){
		$scope.appreciations.splice($index, 1);     	
	}

	$scope.ajoutSurDblClick = function(event) {
			$scope.appreciations.push( {
				"label": "Info",
				"value": 100,
				"x": event.offsetX,
				"y": event.offsetY,
			})
		console.log($scope.appreciations);
	}

	$scope.sauver_appreciations = function(){
		alert('Pour le codeur, il suffit denregistrer le tableau json appreciations dans le back end');
	}

/* FIN DU CONTROLEUR */
});

 
  

#bg

Publicités