0

quiero ver si es posible mostrar un checkbox después de dar clic en un botón. Supongamos que tengo un textbox donde ingreso el código "XY". Al dar clic en el botón "Enviar", se debe mostrar un checkbox con las opciones disponibles para ese código.

Por ejemplo, si el código "XY" es un cupón con 3 opciones de regalo:

  1. Entrada al cine gratis
  2. 50% de descuento en un restaurante
  3. Un llavero de regalo en equis tienda

Quiero que se muestre el checkbox con estas tres opciones, para poder seleccionar una o todas.

Espero que me puedan ayudar. De antemano, gracias

1

1 respuesta 1

0

Puedes crear un diccionario por cada numero de cupon disponible y cargar sus opciones segun el cupon escrito en el textbox cargandolo por su key:

angular.module("app",[])
.controller("ctrl", function($scope){
 

  $scope.cuponesSelecionados= [];
  // Defines los tipos de cupones y sus respectivas opciones. Por ahora solo 3
  var opciones = {
    "xy": ["Entrada al cine gratis", "50% de descuento en un restaurante", "Un llavero de regalo en equis tienda"],
    "yy": ["Salida gratis", "Helado gratis", "Papas 50%"],
    "xx": ["Carro gratis", "Moto gratis", "Barco gratis"]
  };
 
 $scope.cupon  = "";
 $scope.opcionesCupon = [];
 
 $scope.validarCupon= function(){
     $scope.cuponesSelecionados = [];
     $scope.opcionesCupon = opciones[$scope.cupon];// cargamos la opcion del cupon por su key, si no existe, no mostrara nada
 };

 $scope.guardarCuponSeleccionado = function(descripcion, indice){
    $scope.cuponesSelecionados.push({numero: $scope.cupon, descripcion: descripcion, indice: indice });
  };
});
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
 <div ng-controller="ctrl">
 <input type="text" ng-model="cupon" placeholder="Ingrese numero del cupon" />
   <button ng-click="validarCupon()">Validar cupon</button>
   <div >
    <span ng-repeat="option in opcionesCupon">
      <input type="checkbox" ng-click="guardarCuponSeleccionado(option ,$index)" value="{{$index}}"> {{option}}
      </span>
   </div>
  <div ng-repeat="c in cuponesSelecionados">
   Numero cupon: {{c.numero}} - {{c.descripcion}} 
</div>
 </div>
</div>

2
  • Muchas gracias! Me ayudó muchísimo :D el 19 jul. 2017 a las 17:43
  • Excelente. Me alegra haberte ayudado!
    – Einer
    el 19 jul. 2017 a las 17:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.