如何获得 <td> 从angularjs范围动态地到表的值？

Question

I tried to get the values from the table while loading so that based on data value I can set the background color as an indication on my Dashboard. 我尝试在加载时从表中获取值，以便基于数据值可以将背景色设置为仪表板上的指示。 But am not to access the values can anyone help me. 但是我无法获得这些价值观，任何人都可以帮助我。 Thank you. 谢谢。

HTML HTML

<div class="row">
      <div id="content1" class="toggle" style="display:none">
        <div class="col-sm-8">
          <div class="well">
            <table id="table1" class="table table-hover" ng-show="mytable1">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Operational Analysis</th>
                            <th></th>
                            <th></th>
                            <th ng-repeat="item in yearList">{{item.years}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="operation in dataOperationList">
                            <td class="details-control"></td>
                            <td>{{operation.reportTypeDetail}}</td>
                            <td>{{operation.reportFormula}}</td>
                            <td>{{operation.reportRang}}</td>
                            <td>{{operation.year5}}</td>
                            <td>{{operation.year4}}</td>
                            <td>{{operation.year3}}</td>
                            <td>{{operation.year2}}</td>

                        </tr>
                    </tbody>
            </table>
          </div>
        </div>

I tried by jQuery 我尝试过jQuery

$(document).ready(function(){
    $("#table1 tbody tr").each(function() {
          // Within tr we find the last td child element and get content
          alert($(this).find("td:last-child").html());

    });
});

but it didnt work. 但是没有用。

Answer 1

You can simply use ngClass directive, it allows you to dynamically add CSS classes to an element. 您可以简单地使用ngClass指令，它允许您动态地将CSS类添加到元素。 https://docs.angularjs.org/api/ng/directive/ngClass https://docs.angularjs.org/api/ng/directive/ngClass

For example if you want to add a green background the a td element if it has 2019 as a content, first you should define a CSS class : 例如，如果要为td元素添加绿色背景（如果它以2019为内容），则首先应定义一个CSS类：

.green{ backgroud: green; }

Then, use the ngClass directive on the td element : 然后，在td元素上使用ngClass指令：

<td ng-class="{green: (operation.year2 == '2019')}">{{operation.year2}}</td>

Update : 更新：

You can also use ngStyle directive if want to get the color from a variable: 如果要从变量获取颜色，也可以使用ngStyle指令：

<td ng-style="{background: (operation.year2 == '2019')? colorValue : defaultColor}">{{operation.year2}}</td>

colorValue and defaultColor sould be defined somewhere. colorValue和defaultColor必须在某处定义。

Answer 2

Here is the correction, you can test it here : https://jsfiddle.net/abec/6f47jepq/4/ 这是更正，您可以在这里进行测试： https : //jsfiddle.net/abec/6f47jepq/4/

HTML part : HTML部分：

<body ng-app="operationApp" onload="showTableValue()">
  <div class="row" ng-controller="operationController">
    <div id="content1" class="toggle" style="display:none">
      <div class="col-sm-8">
        <div class="well">
          <table id="table1" class="table table-hover" ng-show="mytable1">
            <thead>
              <tr>
                <th></th>
                <th>Operational Analysis</th>
                <th></th>
                <th></th>
                <th ng-repeat="item in yearList">{{item.years}}</th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="operation in dataOperationList">
                <td class="details-control"></td>
                <td>{{operation.reportTypeDetail}}</td>
                <td>{{operation.reportFormula}}</td>
                <td>{{operation.reportRang}}</td>
                <td>{{operation.year5}}</td>
                <td>{{operation.year4}}</td>
                <td>{{operation.year3}}</td>
                <td>{{operation.year2}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <script>
    function showTableValue() {
      var tbl = document.getElementById('table1');
      if (tbl != null) {
        for (var j = 1; j < tbl.rows[1].cells.length; j++)
          alert(tbl.rows[1].cells[j].innerHTML);
      }
    }

  </script>
</body>

JS part : JS部分：

var module = angular.module("operationApp", []);

module.controller("operationController", function($scope) {
  $scope.mytable1 = true;
  $scope.yearList = [{
    "years": "2000,2001,2002,2003,2004"
  }]
  $scope.dataOperationList = [{
      "reportTypeDetail": "Report type details 1",
      "reportFormula": "Report Formula 1",
      "reportRang": "Report Rang 1",
      "year2": 1002,
      "year3": 1003,
      "year4": 1004,
      "year5": 1005
    },
    {
      "reportTypeDetail": "Report type details 2",
      "reportFormula": "Report Formula 2",
      "reportRang": "Report Rang 2",
      "year2": 2002,
      "year3": 2003,
      "year4": 2004,
      "year5": 2005
    }
  ];
});

如何获得 <td> 从angularjs范围动态地到表的值？

问题描述

2 个解决方案

解决方案1
1 已采纳 2019-04-19 13:06:40

解决方案2
0 2019-04-19 13:14:02

如何获得 <td> 从angularjs范围动态地到表的值？

问题描述

2 个解决方案

解决方案1 1 已采纳 2019-04-19 13:06:40

解决方案2 0 2019-04-19 13:14:02

解决方案1
1 已采纳 2019-04-19 13:06:40

解决方案2
0 2019-04-19 13:14:02