Mi primer controlador en Angular 1 (Problema con los inputs en HTML)

Diesan Romero · 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 (javascript) [Seleccionar]

var app = angular.module('my', []);

app.controller('controlador', ($scope) => {
	$scope.nuevoComentario = "";

	$scope.comentarios = [
		{
			comentario: "Hola mundo",
			username: "Diesan"
		}
	];

	$scope.agregarComentario = () => {
		$scope.comentarios.push($scope.nuevoComentario);
	};
});

pues bien y mi HTML5 es:

Código (html4strict) [Seleccionar]

<!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>
	<link rel="stylesheet" href="css/estilos.css">
</head>
<body ng-controller="controlador">
	<input type="text" placeholder="usuario" ng-model="nuevoComentario.username"><br>
	<input type="text" placeholder="comentario" ng-model="nuevoComentario.comentario"><br>
		<button ng-click="agregarComentario()">Agregar</button>
	
	<h3>
		<ol type="1">
			<li ng-repeat="comentario in comentarios">
				{{comentario.comentario}} - <strong>{{comentario.username}}</strong>
			</li>
		</ol>
	</h3>

</body>
</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.

engel lex · 9 Junio 2017, 02:33 AM

CitarSe 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

Razzari · 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 [Seleccionar]


<!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 [Seleccionar]


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 !!

Test Foro de elhacker.net SMF 2.1

Mi primer controlador en Angular 1 (Problema con los inputs en HTML)

Diesan Romero

engel lex

Razzari