0

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <script src="angular.min.js"></script>
  <link rel='stylesheet prefetch' href='materialize.min.css'>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Roboto+Mono:400|Material+Icons">
  </head>
<body ng-app="ProductoApp" >

	<div ng-controller="myCtrl" >

	<input ng-model="query" type="text"/> 
    
	    <table>
	      <tr>
	        <th>id</th>
	        <th>Producto</th>
          <th>Formula</th>
	      </tr>
	      <tr ng-repeat="Producto in productos | filter:query">
	        <td>{{Producto.id}}</td>
	        <td>{{Producto.producto}}</td>  
          <td >{{Producto.formula}}</td>
          <td><a href="#modal1" class="secondary-content" onclick="showAnswer('{{Producto.id}}')"><i class="tiny material-icons" >skip_next</i></a>
          </td> 
	      </tr>
	    </table>
 
	 </div>
    <div ng-controller="myCtrl" id="modal1" class="modal modal-fixed-footer">
          <div class="modal-content">
              <h4 id="producto">Modal Header</h4>
             
              <p id="formula">.*.*.*</p>
             <h3>{{producto.id}} </h3>
             <h3>{{producto.producto}} </h3>
             <h3>{{producto.formula}} </h3>
               <h4>{{campoTexto}}</h4> <!-- Aqui necesito multiplicar el dato ingresado por lo que hay en el campo formula del json. -->
               <h6>{{algo}}</h6>
              <h1><input type="text" ng-model="campoTexto"></h1>
          </div>
          <div class="modal-footer">
              <a  class="modal-action modal-close waves-effect waves-green btn-flat ">Aceptar</a>
          </div>
        </div>
      <script>
      var ProductoApp = angular.module('ProductoApp', []);
        ProductoApp.controller('myCtrl', ['$scope', '$http', function (scope, http){
        http.get('catalogo.json').success(function(data) {
          scope.productos = data; 
           
        });
      }]);
  </script>


 <script >
   function showAnswer( questionNumber ){
    switch(questionNumber){
      scope.productos = data;
        case '1': 
        varProducto = "Amoxa";
         varFormula = 250;
         
         break;
        case '2' : 
        varProducto = "Aceta";
        varFormula = 120;
        break;
        case '3' : 
        varProducto = "Clorfeniramina";
        varFormula = 2;
        break;      
    }
document.getElementById("producto").innerHTML = varProducto;
document.getElementById("formula").innerHTML = parseInt(varFormula);
}
 </script>
  <script src='jquery.min.js'></script>
  <script src="materialize.min.js"></script>  
    <script >$('.modal').modal();</script>
</body>
</html>

Link de ejemplo Tengo una pequeña app en la que importo los datos por medio de un archivo json, pero cuando envio uno de estos datos a una ventana modal no me muestra nada. Necesito usar datos que estan en ese archivo pero dependiendo del origen del un clic. por ejemplo si hago clic en link1 que name diga: producto1. si hago clic en link2 que name diga: producto2.

   

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Angular.js Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  <link rel='stylesheet prefetch' href='materialize.min.css'>
  <link rel="stylesheet" type="text/css" href="Material+Icons.css">
  </head>
<body ng-app="countryApp" >

	<div ng-controller="CountryCtrl" >

	<input ng-model="query" type="text"/> 
    
	    <table>
	      <tr>
	        <th>Country</th>
	        <th>Population</th>
          <th>Modal</th>
	      </tr>
	      <tr ng-repeat="country in countries | filter:query">
	        <td>{{country.name}}</td>
	        <td>{{country.population}}</td>  
          <td >{{country.id}}</td>
          <td><a href="#modal1" class="secondary-content" onclick="showAnswer('{{country.id}}')"><i class="tiny material-icons" >skip_next</i></a>
          </td>     
	      </tr>
	    </table>
 
	 </div>
    <div ng-controller="CountryCtrl" id="modal1" class="modal modal-fixed-footer">
          <div class="modal-content">
              <h4 id="producto">Modal Header</h4>
             
              <p id="formula">.*.*.*</p>
              <h4>{{campoTexto}}</h4>
              <h3>{{algo}} </h3>
              <h1><input type="text" ng-model="campoTexto"></h1>
              
          </div>
          <div class="modal-footer">
              <a  class="modal-action modal-close waves-effect waves-green btn-flat ">Aceptar</a>
          </div>
        </div>


      <script>
      var countryApp = angular.module('countryApp', []);
      countryApp.controller('CountryCtrl', ['$scope', '$http', function (scope, http){
        http.get('https://farmacialimon.neocities.org/countries.json').success(function(data) {
          scope.countries = data; 
        });
      }]);
  </script>
 <script >
   function showAnswer( questionNumber ){
    switch(questionNumber){
        case '1': 
         
        varProducto = "Amoxa";
        varFormula = 250;
         
         break;
        case '2' : 
        varProducto = "Aceta";
        varFormula = 120;
        break;
        case '3' : 
        varProducto = "Clorfeniramina";
        varFormula = 2;
        break;      
    }
document.getElementById("producto").innerHTML = varProducto;
document.getElementById("formula").innerHTML = parseInt(varFormula)+"aquiest";
}
 </script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="materialize.min.js"></script>  
    <script >$('.modal').modal();</script>
</body>
</html>

3
  • ¿La funcion showAnswer si esta recibiendo el id correcto del "pais"? Creo que el modelo al que esta enlazado la informacion es countries, country solo es el nombre del que hace uso la directiva ng-repeat para mostrar la info. Supongo que se podria enlazar de alguna forma el contido del ultimo td, para que este disponible en el controlador y puedas mandarselo a la funcion adecuadamente. el 26 jun. 2017 a las 22:57
  • El showAnswer si recibe el id correcto. Si pongo en el model <h3>{{countries}} </h3> me muestra toda la info del .json el problema es como pedirle que vaya al campo especifico segun contry.id el 27 jun. 2017 a las 14:07
  • fijate que en el switch estan mal las variables: varProducto = "Amoxa";... deberia ser... var Producto = "Amoxa"; y asi con el resto el 1 mar. 2019 a las 14:08

2 respuestas 2

0

Puedes aprovechar atributos como data-param1, para los parámetros que necesitas enviar al modal, como:

<a href="#modal1" data-producto="{{country.name}}" data-formula="{{country.population}}" class="secondary-content"><i class="tiny material-icons" >skip_next</i></a>

y en tu sección de script acceder a éstas como

 <script >
       //Evento que se genera cuándo un modal de bootstrap es mostrado
       $("#modal1").on('show.bs.modal', function (e) {
            //Obtienes los parámetros accediendo al atributo data-producto, data-formula
            var varProducto = $(e.relatedTarget).data('producto');
            var varFormula = $(e.relatedTarget).data('formula');
            //Modificas el elmento en el que deseas mostrar la información
            document.getElementById("producto").innerHTML = varProducto;
            document.getElementById("formula").innerHTML = parseInt(varFormula)+"aquiest";
       });
 </script>
2
  • No consigo hacer lo que me dices. el 27 jun. 2017 a las 20:15
  • Lo siento @JosueGonzales no había notado que no usas bootstrap sino materialize, una alternativa para hacer el uso de modals más fácil en angular.js, es que utilices la librería ngDialog
    – Nex Saloj
    el 27 jun. 2017 a las 22:05
0

Se me ocurrio algo facil pero no me funciona. en el Case declaro la variable varFormula con un valor que se va a multiplicar por el ng-model="campoTexto" se me ocurrio que en el {{campoTexto}} pudo poner algo asi:

<h4>{{campoTexto * varFormula }}</h4> pero no funciona.

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.