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

Iniciado por Diesan Romero, 9 Junio 2017, 02:24 AM

0 Miembros y 1 Visitante están viendo este tema.

Diesan Romero

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

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

#2
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:

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


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




"Los ordenadores son inutiles, solo pueden darte respuestas" Pablo Picasso