I have a dynamic table displaying various data, mostly text, but with a few buttons included.
Now, I need to figure out how to handle this
Here is the current data structure:
[ { "BET": 57630343, "CUSTOMER": 181645, "XX_FILL OPEN": true },
{ "BET": 57633044, "CUSTOMER": 181645, "XX_FILL OPEN": true },
{ "BET": 57633047, "CUSTOMER": 181645, "XX_FILL OPEN": true },
{ "BET": 57635034, "CUSTOMER": 181645, "XX_FILL OPEN": true } ]
This is how it looks:
https://i.stack.imgur.com/Lxz1x.png
If the data starts with XX..., it should be presented as a button. For example: "XX_FILL OPEN": true would become a button.
This is how I am currently rendering the table:
In the controller, I have the following code snippet:
$scope.loadReports = function() {
ReportsFactory.pendingBets(reportParam).then(function(data) {
gridInfo = _.forEach(data, function(item) {return item;});
$scope.rows = gridInfo;
$scope.cols = Object.keys($scope.rows[0]);
}
And in the HTML:
<table>
<thead>
<tr>
<th ng-repeat="column in cols">{{column}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td ng-repeat="column in cols">{{row[column]}}</td>
</tr>
</tbody>
</table>
So, my question is how can I change the display of true to a button whenever the data starts with XX...?