javascript - 如何获取从 angularjs 范围动态到达表的 <td> 值？

Question

我尝试在加载时从表中获取值，以便根据数据值我可以将背景颜色设置为仪表板上的指示。但我无法获取值(value)观，任何人都可以帮助我。 谢谢。

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>

我尝试使用 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());

    });
});

但是没有成功。

Answer 1

您可以简单地使用ngClass指令，它允许您动态地将CSS类添加到元素。 https://docs.angularjs.org/api/ng/directive/ngClass

例如，如果您想在内容为 2019 的 td 元素中添加绿色背景，首先您应该定义一个 CSS 类:

.green{ backgroud: green; }

然后，在 td 元素上使用 ngClass 指令:

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

更新:

如果想从变量中获取颜色，您还可以使用 ngStyle 指令:

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

colorValue 和 defaultColor 应该在某处定义。