How can I pass a data from a controller to another function in javascritp?

Question

How can I pass a data from a controller to another function in javascritp?

Navigation

#1 by (0 votes)
#2 by (0 votes)

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>

Sample Link I have a small app in which I import the data through a json file, but when I send one of these data to a modal window it does not show me anything. I need to use data that is in that file but depending on the origin of the one click. for example if I click on link1 whose name says: product1. if I click on link2 that name says: product2.

   

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

javascript html angularjs

asked by Josue Gonzalez 26.06.2017 в 23:50

source

2 answers

Problems with setBounds Header with Company and Detail of Filters in Jasper Report

score 0 · Answer 1

You can take advantage of attributes such as data-param1 , for the parameters you need to send to the modal, such as:

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

and in your script section access these as

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

score 0 · Answer 2

I thought of something easy but it does not work for me. in the Case I declare the variable varFormula with a value that will be multiplied by the ng-model="Text field" it occurred to me that in the {{fieldText}} could put something like this:

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