Fatal编程技术网

更新javascript事件上的html表

javascript html angularjs

更新javascript事件上的html表,javascript,html,angularjs,Javascript,Html,Angularjs,将数据从json文件加载到表时，应该根据每个单元格的数据使用颜色更新这些单元格 我的颜色更改脚本可以工作，但不是按预期的方式工作，这就是发生的情况，首先它从json文件加载数据，但单元格的颜色在我刷新页面之前不会更改 这就是我使用onload（）事件的时候，使用onchange（）无论如何都不起作用 我现在使用的技巧是将onload（）事件替换为onmouseover=“colorCeldas（）”和onmouseout=“colorCeldas（）” 但我能做些什么来避免使用那种“肮脏”的伎俩

将数据从json文件加载到表时，应该根据每个单元格的数据使用颜色更新这些单元格

我的颜色更改脚本可以工作，但不是按预期的方式工作，这就是发生的情况，首先它从json文件加载数据，但单元格的颜色在我刷新页面之前不会更改

这就是我使用onload（）事件的时候，使用onchange（）无论如何都不起作用

我现在使用的技巧是将onload（）事件替换为onmouseover=“colorCeldas（）”和onmouseout=“colorCeldas（）”

但我能做些什么来避免使用那种“肮脏”的伎俩呢

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>
首先，angularJs是一个前端框架，是一个好的实践，不要将DOM操作放在控制器中，所有的DOM操作都必须放在模板或代码中

控制器不应引用DOM， 应该有观行为,， 如果用户执行X， 我从哪里得到X

在这种情况下，在pueblos数据从服务器到达之前以及angular对UI进行更改之前执行加载功能。当dom中的函数colorCeldas为空时继续

最好的方法是将所有代码放在模板上

将此代码放在具有rigth值的每个单元格上

<td ng-class="valueColor(pueblo.oferta)">{{pueblo.oferta}}</td>

{{pueblo.oferta}
并将此方法添加到控制器

$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';
  }
}

$scope.valueColor=函数（val）{
如果（val>75&&val=50&&val=0&&val<50）{//rojo
返回“rojoBg”；
}否则{//sin datos gris
返回“grisBg”；
}
}
您有小提琴或代码示例吗？请粘贴您的代码，这只是html和javascript。“首先从json文件加载数据”是什么意思。 
<td ng-class="valueColor(pueblo.oferta)">{{pueblo.oferta}}</td>

$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';
  }
}