I am working with a table that is generated by an ng-repeat loop and connected to a model using ng-bind. In the first column, I want to dynamically add an HTML element based on a specific condition. How can I accomplish this?
<!doctype html>
<html ng-app="plunker">
<head>
<script data-require="angular.js@*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng:controller="MainCtrl">
<table border="1">
<thead style="font-weight: bold;">
<tr>
<th class="text-right" ng-repeat="column in columnsTest" ng-if="column.checked" ng-bind="column.id"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td ng-repeat="column in columnsTest" ng-if="column.checked" ng-bind="formatValue(row[column.id], column.id == 'Value1')"></td>
</tr>
</tbody>
</table>
</div>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $filter) {
$scope.formatValue = function(value, addIcon) {
if (addIcon) {
var htmlElement = '<span>This is a SPAN</span>'
value = htmlElement + value;
}
return value;
}
$scope.columnsTest = [{
id: 'Value1',
checked: true
}, {
id: 'Value2',
checked: true
}, {
id: 'Value3',
checked: true
}];
$scope.rows = [{
id: 1,
"Value1": 911,
"Value2": 20,
"Value3": 20
}, {
id: 2,
"Value1": 200,
"Value2": 20,
"Value3": 20
}];
});
I want to ensure that my HTML element appears before the value in the first column. I attempted to use $scope, but the span still displays as text. How can I correct this?
View the code on Plunker