var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.rows = [{
"BET": 57630343,
"CUSTOMER": 181645,
"SPORT": "MLB",
"XX_FILL OPEN": {
"element": {
"element_type": [
"WAGER_ACTION_BUTTON"
],
"element_call": [
"fillOpen(57630343)"
],
"element_content": [
""
]
}
},
"XX_VIEW": null,
"XX_CANCEL": {
"element": {
"element_type": [
"BASIC_CHECKBOX"
],
"element_call": [
""
],
"element_content": [
"0"
]
}
}
},{
"BET": 57630343,
"CUSTOMER": 181645,
"SPORT": "MLB",
"XX_FILL OPEN": {
"element": {
"element_type": [
"WAGER_ACTION_BUTTON"
],
"element_call": [
"fillOpen(57630343)"
],
"element_content": [
""
]
}
},
"XX_VIEW": null,
"XX_CANCEL": {
"element": {
"element_type": [
"BASIC_CHECKBOX"
],
"element_call": [
""
],
"element_content": [
"0"
]
}
}
}];
$scope.arrCols = ["BET","CUSTOMER","SPORT","XX_FILL OPEN","XX_VIEW","XX_CANCEL"];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js" data-semver="1.4.5"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="(key,val) in testItems" ng-switch on="key">
<button ng-switch-when='button'>{{element.name}}</button>
<input type="checkbox" ng-switch-when='checkbox' />{{key}}
<span ng-switch-when='span'>{{element.name}}</span>
</div>
<h1> switch on col value</h1>
<table>
<thead>
<tr>
<th ng-repeat="column in arrCols"
ng-init="isXX = column.indexOf('XX') === 0">
<span ng-if="isXX">{{column.substring(3).replace('_', ' ')}}</span>
<span ng-if="!isXX">{{column}}</span>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td ng-repeat="column in arrCols">
<div ng-switch="column">
<button ng-switch-when="XX_FILL OPEN" >Test Button</button>
<input ng-switch-when="XX_CANCEL" type="checkbox" />
<span ng-switch-default>{{row[column]}}</span>
</div>
</td>
</tr>
</tbody>
</table>
<h1> switch on element type in row</h1>
<table>
<thead>
<tr>
<th ng-repeat="column in arrCols"
ng-init="isXX = column.indexOf('XX') === 0">
<span ng-if="isXX">{{column.substring(3).replace('_', ' ')}}</span>
<span ng-if="!isXX">{{column}}</span>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td ng-repeat="column in arrCols" ng-init="isXX = column.indexOf('XX') === 0">
<div ng-if="isXX" >
<span> </span>
<div ng-switch="row[column].element.element_type[0]">
<button ng-switch-when="WAGER_ACTION_BUTTON" >Test Button</button>
<input ng-switch-when="BASIC_CHECKBOX" type="checkbox" />
</div>
</div>
<div ng-if="!isXX" >
<span> {{row[column]}}</span>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
/* Put your css in here */