Como utilizar un campo especifico de un archivo.json con angularjs
Publicado por josue (1 intervención) el 27/06/2017 20:49:50
Tengo una app que carga sus datos desde un json.
Pero quiero que en determinado momento (cuando se abre una ventana modal) utilice un campo especifico para usar esa informacion y hcer un calculo posterior.
https://farmacialimon.neocities.org/buscar/index.html
Codigo que carga la informacion
codigo que solicita se abra la ventana modal
codigo donde quiero se vea la info ESPACIFICA de un determinado campo basado en el Id solicitado de momeneto lo hago con un evento click que va a una funcio ShowAnswer y con un case pero de igual manera no me funciona porque la varibale declara en el Case no la puedo enviar a la pantalla modal.
Aqui dejo el doc completo para un mejor analisis.
Pero quiero que en determinado momento (cuando se abre una ventana modal) utilice un campo especifico para usar esa informacion y hcer un calculo posterior.
https://farmacialimon.neocities.org/buscar/index.html
Codigo que carga la informacion
1
2
3
4
5
6
7
var ProductoApp = angular.module('ProductoApp', []);
ProductoApp.controller('myCtrl', ['$scope', '$http', function (scope, http){
http.get('catalogo.json').success(function(data) {
scope.productos = data;
});
}]);
codigo que solicita se abra la ventana modal
1
<td><a href="#modal1" class="secondary-content" onclick="showAnswer('{{Producto.id}}')"><i class="tiny material-icons" >skip_next</i></a>
codigo donde quiero se vea la info ESPACIFICA de un determinado campo basado en el Id solicitado de momeneto lo hago con un evento click que va a una funcio ShowAnswer y con un case pero de igual manera no me funciona porque la varibale declara en el Case
1
varFormula = 250;1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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}} </h3>
<h4>{{campoTexto}}</h4>
<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>
Aqui dejo el doc completo para un mejor analisis.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!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>
- buscarjs.rar(265,2 KB)
Valora esta pregunta
0