[英]How to get <td> values that comes dynamically to table from angularjs scope?
我尝试在加载时从表中获取值,以便基于数据值可以将背景色设置为仪表板上的指示。 但是我无法获得这些价值观,任何人都可以帮助我。 谢谢。
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());
});
});
但是没有用。
您可以简单地使用ngClass
指令,它允许您动态地将CSS类添加到元素。 https://docs.angularjs.org/api/ng/directive/ngClass
例如,如果要为td
元素添加绿色背景(如果它以2019为内容),则首先应定义一个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
必须在某处定义。
这是更正,您可以在这里进行测试: https : //jsfiddle.net/abec/6f47jepq/4/
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部分:
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
}
];
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.