Issue
When loading data from a json file to a table is supposed to update those cells with colors depending the data of each cell.
My color changing script works but not in the intended way, this is what happens, first it loads the data from the json file but the colors of the cells doesn't change until i refresh the page.
that's when i use the onload() event, using the onchange() doesn't work in anyway.
the trick i'm using now is having the onload() event replaced with onmouseover="colorCeldas()" and onmouseout="colorCeldas()".
But what i can do to avoid using that 'dirty' trick?
the html:
<!DOCTYPE html>
<html ng-app="App">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<title>Dashboard</title>
<script src="./scripts/json_load.js"></script> <!--script que cargar archivo json-->
<script src="./scripts/color_celda.js"></script> <!--script que cambia color de las celdas -->
<link rel = "stylesheet" type = "text/css" href = "./css/style.css" /> <!--css con colores de celdas -->
</head>
<body onload="colorCeldas()" onmouseover="colorCeldas()" onmouseout="colorCeldas()">
<!--Panel-->
<div class="container" ng-controller="tablaCtrl" >
<!--tabla con indicadores-->
<div class="col-sm-8">
<fieldset style="border:1px solid black;">
<table class="table" id="tablaIndicador" style="border-spacing: 10px; border-collapse: separate;">
<tr>
<th>Oferta</th>
<th>Demanda</th>
<th>Seguridad</th>
<th>Comunidad <br>Receptora</th>
<th>Mercadotecnia</th>
<th>Accesibilidad</th>
</tr>
<tr ng-repeat="pueblo in pueblos" style="color:white">
<td>{{pueblo.oferta}}</td>
<td>{{pueblo.demanda}}</td>
<td>{{pueblo.seguridad}}</td>
<td>{{pueblo.comunidad}}</td>
<td>{{pueblo.mercadotecnia}}</td>
<td>{{pueblo.accesibilidad}}</td>
</tr>
</table>
</fieldset>
</div>
</div>
</div>
</body>
</html>
the scripts
color_celda.js
function colorCeldas() {
var table = document.getElementById('tablaIndicador'),
cells = table.getElementsByTagName('td');
var val;
for (var i = 0, len = cells.length; i < len; i++) {
val= parseInt(cells[i].innerHTML,10);
if (val > 75 && val <= 100) { //verde
$(cells[i]).addClass('verdeBg')
} else if (val >= 50 && val <= 75) { //naranja
$(cells[i]).addClass('naranjaBg')
} else if (val >= 0 && val < 50) { //rojo
$(cells[i]).addClass('rojoBg')
} else { // sin datos gris
$(cells[i]).addClass('grisBg')
}
}
}
the json file loader script
var App = angular.module('App', []);
App.controller('tablaCtrl', function($scope, $http) {
$http.get('pueblos.json')
.then(function(res){
$scope.pueblos = res.data;
});
});
Solution
AngularJS is a frontend framework. It is a good practice to avoid adding DOM manipulations inside the controllers, all the DOM manipulation must be inside the template or in Directives codes.
Controllers should not reference DOM, Should Have view behavior, What should happen if user do X, Where do I get X from
In this case, the onLoad function is executed before the pueblos data arrive from the server, and before angular made the changes to the UI. Resuming when the function colorCeldas the DOM is empty.
The best way of do this is to put all your code on the template.
put this code on every cell with the right value
<td ng-class="valueColor(pueblo.oferta)">{{pueblo.oferta}}</td>
and add this method to the controller
$scope.valueColor = function (val){
if (val > 75 && val <= 100) { //verde
return 'verdeBg';
} else if (val >= 50 && val <= 75) { //naranja
return 'naranjaBg';
} else if (val >= 0 && val < 50) { //rojo
return 'rojoBg';
} else { // sin datos gris
return 'grisBg';
}
}
Answered By - chfumero
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.