elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Recopilación Tutoriales y Manuales Hacking, Seguridad, Privacidad, Hardware, etc


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Mi primer controlador en Angular 1 (Problema con los inputs en HTML)
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Mi primer controlador en Angular 1 (Problema con los inputs en HTML)  (Leído 3,554 veces)
Ali Baba


Desconectado Desconectado

Mensajes: 310


Ver Perfil WWW
Mi primer controlador en Angular 1 (Problema con los inputs en HTML)
« en: 9 Junio 2017, 02:24 am »

Se que Angular 1 es viejo y ya no tiene soporte pero quiero aprenderlo, ya luego me actualizare.

Estoy creando un controlador, este es mi codigo javascript

Código
  1. var app = angular.module('my', []);
  2.  
  3. app.controller('controlador', ($scope) => {
  4. $scope.nuevoComentario = "";
  5.  
  6. $scope.comentarios = [
  7. {
  8. comentario: "Hola mundo",
  9. username: "Diesan"
  10. }
  11. ];
  12.  
  13. $scope.agregarComentario = () => {
  14. $scope.comentarios.push($scope.nuevoComentario);
  15. };
  16. });


pues bien y mi HTML5 es:

Código
  1. <!DOCTYPE html5>
  2. <html lang="es-ES" ng-app="my">
  3. <meta charset="utf-8">
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  6. <script src="js/controller.js"></script>
  7. <link rel="stylesheet" href="css/estilos.css">
  8. </head>
  9. <body ng-controller="controlador">
  10. <input type="text" placeholder="usuario" ng-model="nuevoComentario.username"><br>
  11. <input type="text" placeholder="comentario" ng-model="nuevoComentario.comentario"><br>
  12. <button ng-click="agregarComentario()">Agregar</button>
  13.  
  14. <h3>
  15. <ol type="1">
  16. <li ng-repeat="comentario in comentarios">
  17. {{comentario.comentario}} - <strong>{{comentario.username}}</strong>
  18. </li>
  19. </ol>
  20. </h3>
  21.  
  22. </body>
  23. </html>

Lo que quiero lograr con este codigo es que la lista se actualice con el comentario y el nombre del usuario que yo quiera, el problema esta en el input que no me deja escribir texto. Sin embargo, cuando quito todo lo referente a Angular, creo un input y funciona perfectamente, pero si vuelvo a incluir el codigo angular se jodio lola. :(



En línea

engel lex
Moderador Global
***
Desconectado Desconectado

Mensajes: 15.514



Ver Perfil
Re: Mi primer controlador en Angular 1 (Problema con los inputs en HTML)
« Respuesta #1 en: 9 Junio 2017, 02:33 am »

Citar
Se que Angular 1 es viejo y ya no tiene soporte pero quiero aprenderlo, ya luego me actualizare

que intentas? -.-

no es como si las versiones de angular fueran un juego y necesitas pasar la historia... no...

esto es como decir, "se que un fiat uno es viejo y no tiene respuestos, pero quiero aprenderlo para luego manejar un tesla"

a menos que realmente necesites una característica no implantada evita hacerlo

Borrado los posts seguidos, bien sabes la politica de no hacer doble post, sino usar el boton de modificar


En línea

El problema con la sociedad actualmente radica en que todos creen que tienen el derecho de tener una opinión, y que esa opinión sea validada por todos, cuando lo correcto es que todos tengan derecho a una opinión, siempre y cuando esa opinión pueda ser ignorada, cuestionada, e incluso ser sujeta a burla, particularmente cuando no tiene sentido alguno.
Razzari

Desconectado Desconectado

Mensajes: 76


El que espera desespera


Ver Perfil
Re: Mi primer controlador en Angular 1 (Problema con los inputs en HTML)
« Respuesta #2 en: 10 Junio 2017, 17:05 pm »

Hola magodiesan! mira yo hace bastante estoy trabajando con angular JS que seria la versión uno, actualmente en la empresa donde trabajo estamos por empezar el proceso de migración a angular 4.
Pero angular JS siempre me gusto mas que el resto de las nuevas versiones.
Pero como bien dice  engel lex , si estas empezando es recomendable empezar con las versiones nuevas ! siempre vas a tener mas soporte y tu codigo va a ser mas increible que si usas las versiones viejas.

te paso el codigo que a mi me esta funcionando para resolver tu problema.
solo hice un par de cambios. el codigo esta comentado por las dudas no entiendas algo.

HTML:
Código:
<!DOCTYPE html5>
<html lang="es-ES" ng-app="my">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="js/controller.js"></script>
</head>
<body ng-controller="controlador">
<input type="text" placeholder="usuario" ng-model="comentUsuario.username"><br>
<input type="text" placeholder="comentario" ng-model="comentUsuario.comentario"><br>
<button ng-click="agregarComentario();">Agregar</button>

<div ng-repeat="comen in lista">
 {{comen.username}}  -  {{comen.comentario}}
</div>

</body>
</html>


JS:

Código:
var app = angular.module('my', []);

app.controller('controlador', controladorFunction); //referencia al la funcion "controladorFunction"

function controladorFunction($scope){
   $scope.lista = []; ///array con comentarios para mostrar en lista

    $scope.comentUsuario = []; /// objeto que va a tener el valor de los inputs para su posterior inserción en " $scope.comentariosLista"

   $scope.agregarComentario = function(){ //función agregar comentario
      $scope.lista.push({
          username: $scope.comentUsuario.username,    // se insertan los valores en la lista
          comentario: $scope.comentUsuario.comentario //
      });

      //como los input estan "enlazados a un ng-model procedemos a vaciar los input después de la inserción"
      $scope.comentUsuario.username="";
      $scope.comentUsuario.comentario="";
   };

};


Cualquier cosa me preguntas !!
Saludos desde Argentina !!




« Última modificación: 10 Junio 2017, 17:10 pm por Razzari » En línea

"Los ordenadores son inutiles, solo pueden darte respuestas" Pablo Picasso
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Necesto realizar blind sql a una web a través de inputs de un formulario html
Hacking
ukraniano 4 3,567 Último mensaje 15 Enero 2013, 16:20 pm
por ukraniano
Problema con los inputs y los arrays
PHP
:ohk<any> 4 2,313 Último mensaje 21 Agosto 2013, 13:27 pm
por :ohk<any>
[Resuelto] Problema Filtro Angular JS
Desarrollo Web
str_null 1 2,034 Último mensaje 1 Septiembre 2015, 01:43 am
por str_null
Angular JS (Angular Material)
Desarrollo Web
carwen 3 3,443 Último mensaje 20 Junio 2016, 21:46 pm
por daniela Vega
adaptar codigo html a angular
Desarrollo Web
Beginner Web 2 2,828 Último mensaje 22 Mayo 2020, 04:45 am
por Beginner Web
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines