Envío el formulario para guardar los datos que necesito, se recarga la página y el formulario desaparece. Lo que necesito es mantener la opción elegida en el select y que el formulario se vea.
Hacerlo de esa manera no le brinda una buena UX al usuario. Si usas angular debes aprovechar lo que te brinda para hacer una aplicación rica en UX y funcionalidad. Lo que deseas hacer se puede lograr simplemente usando AJAX. Angular provee el módulo http
para ésto.
$scope.crearAlgo = function () {
$http.post('//localhost/app/controlador/crear', $scope.nuevoAlgo)
.then(function (response) => {
alert('Algo creado satisfactoriamente');
// asignar un objeto vacío a 'nuevoAlgo' para resetear sus valores
$scope.nuevoAlgo = {};
});
}
En el formulario HTML ligas cada control con una propiedad de nuevoAlgo
.
<input type="text" ng-model="nuevoAlgo.nombre"/>
<input type="text" ng-model="nuevoAlgo.apellidos"/>
<input type="text" ng-model="nuevoAlgo.email"/>
Lo que pasará es lo siguiente:
- Conforme escribas en los inputs, el valor será asignado a la propiedad ligada mediante
ng-model
.
- Se envía el formulario mediante AJAX.
- Cuando el servidor haya respondido, restablecemos el objeto y por ende, los inputs.
Ejemplo
var app = angular.module('myApp', []);
app.controller('formCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.user = { };
$scope.option = ''; /* para mostrar/ocultar el formulario */
$scope.create = function () {
// lo comento porque no es posible hacer peticiones AJAX en el sitio
/*$http.post('//localhost/ejemplo/usuarios/crear', $scope.user
)
.then(function (response) {
$scope.user = {};
});*/
$scope.user = { };
}
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<div ng-app="myApp" ng-controller="formCtrl">
<select ng-model="option">
<option value="">Seleccionar</option>
<option value="show">Mostrar</option>
</select>
<form ng-show="option == 'show'">
<input type="text" ng-model="user.name" />
<input type="text" ng-model="user.lastname" />
<input type="button" ng-click="create()" value="Registrar"/>
</form>
</div>