[英]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.