Ciao,
sto studiando AngularJS e tanto per fare ho provato a rifare quello che ho già fattoin pratica cliccando su una cella di tabella si deve aprire un boxdi editing ( Vedi la mia discussioe precedente sull'argomento ).
La formazione della tabella è davvero semplice, altro che php/html e anche far apparire/scomparire un elemento qualsiasi è semplice, e persino inserire in questo ( una textarea ) il testo presente nella cella sulla quale si fa click.
Il problema è prendere la posizione di tale cella in modo da farvi apparire sopra la textarea. Non riesco ad averne ragione!
Il codice della pagina:
Ho provato con posX = angular.element( contents.target ).prop( 'offsetLeft' ); ma mi da errore e posX indefinitocodice HTML:<html> <head> <title>Prova di lettura di una tabella con angulajs</title> <link rel="stylesheet" href="bootstrap.min.css"> <script src="jquery-1.11.3.min.js"></script> <script src="angular.min.js"></script> <style> body { background-color: #F5F5F5; color: #000; } table tr:nth-child( odd ) { background-color: #EDF4FE; } table tr:nth-child( even ) { background-color: #F0F0F0; } table > tr > td {position: relative;} textarea { position: absolute; width: 200px; height: 150px; padding: 5px; margin: 0; } </style> </head> <body> <div ng-app="tabellaSiti" ng-controller="tabelControl"> <div ng-hide="editing"> <textarea ng-model="editor">{{ editor }}</textarea> </div> <table class="table"> <tr ng-repeat="x in siti"> <td>{{ $index + 1 }}</td> <td><a href="{{ x.url }}" title="{{ x.testo_alternativo }}" target="_blank">Link a: {{ x.titolo_sito }}</a></td> <td ng-dblclick="displayContents( this )">{{ x.didascalia }}</td> </tr> </table> </div> <script> var app = angular.module( 'tabellaSiti', [] ); app.controller( 'tabelControl', function( $scope, $http ) { $http.get( "http://gamerama.altervista.org/prove/legge_tabella.php" ) .then( function ( risposta ) { $scope.siti = risposta.data.records; $scope.editing = true; $scope.displayContents = function( contents ) { $scope.editor = contents.x.didascalia; $scope.editing = !$scope.editing; }; }); }); </script> </body> </html>
Anzi vi do pure il link alla pagina: http://gamerama.altervista.org/prove/testa_tabella.php spero vi aiuti.

 
			
			
 
					
					
					
						 Rispondi quotando
  Rispondi quotando