var app = angular.module('anApp', []);
app.controller('aCtrl', function($scope) {
$scope.data = {"name" : "WW_CIW" , "mod" : "WW" , "selected" : false},
{"name" : "1" , "mod" : "WW" , "selected" : false},
{"name" : "2" , "mod" : "WW" , "selected" : false},
{"name" : "3" , "mod" : "WW" , "selected" : false},
{"name" : "4" , "mod" : "WW" , "selected" : false},
{"name" : "5" , "mod" : "WW" , "selected" : false},
{"name" : "6" , "mod" : "APS" , "selected" : false},
{"name" : "7" , "mod" : "APS" , "selected" : false},
{"name" : "8" , "mod" : "APS" , "selected" : false},
{"name" : "9" , "mod" : "APS" , "selected" : false},
{"name" : "10" , "mod" : "APS" , "selected" : false},
{"name" : "11" , "mod" : "APS" , "selected" : false},
{"name" : "12" , "mod" : "APS" , "selected" : false},
{"name" : "13" , "mod" : "APN" , "selected" : false},
{"name" : "14" , "mod" : "APN" , "selected" : false},
{"name" : "15" , "mod" : "APN" , "selected" : false},
{"name" : "16" , "mod" : "APN" , "selected" : false},
{"name" : "17" , "mod" : "APN" , "selected" : false},
{"name" : "18" , "mod" : "APN" , "selected" : false},
{"name" : "19" , "mod" : "APN" , "selected" : false},
{"name" : "20" , "mod" : "AG" , "selected" : false},
{"name" : "21" , "mod" : "AG" , "selected" : false},
{"name" : "22" , "mod" : "AG" , "selected" : false},
{"name" : "23" , "mod" : "AG" , "selected" : false},
{"name" : "24" , "mod" : "AG" , "selected" : false},
{"name" : "25" , "mod" : "AG" , "selected" : false},
{"name" : "26" , "mod" : "AG" , "selected" : false},
{"name" : "27" , "mod" : "AG" , "selected" : false},
{"name" : "28" , "mod" : "EMA" , "selected" : false},
{"name" : "29" , "mod" : "EMA" , "selected" : false},
{"name" : "30" , "mod" : "EMA" , "selected" : false},
{"name" : "31" , "mod" : "EMA" , "selected" : false},
{"name" : "32" , "mod" : "EMA" , "selected" : false},
{"name" : "33" , "mod" : "EMA" , "selected" : false},
{"name" : "34" , "mod" : "EMA" , "selected" : false},
{"name" : "35" , "mod" : "OTHER" , "selected" : false},
{"name" : "36x" , "mod" : "USERSPACE" , "selected" : false}
});
var modlist = [] , submodlist = [];
function addModule(param) {
modlist.push(param);
}
function addSubModule(param) {
modlist.push(param);
}
function checkModule(param) {
return modlist.indexOf(param) != -1;
}
function checkSubModule(param) {
return subModlist.indexOf(param) != -1;
}
function tester(param) {
var HTML = '<table border="1"><tr><td>Check</td><td>Submodule</td></tr>';
HTML += ('<tr ng-repeat="submod in array"><td>' + '<input type="checkbox" name="submodule" value="submod.name"></td><td>{{submod.name}}</td></tr>');
HTML += '</table>';
document.getElementById('kya-bakchodi-hai').innerHTML = HTML;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="anApp" ng-controller='aCtrl'>
<table border="1">
<tr>
<td>Check</td>
<td>Module</td>
<td>Last Start TS</td>
<td>Last End TS</td>
<td>Log</td>
</tr>
<tr>
<td><input type='checkbox' name='module' value='WW'></td>
<td><a onclick="tester('WW')">WW</a></td>
<td>Today</td>
<td>Today</td>
<td>Hello</td>
</tr>
<tr>
<td><input type='checkbox' name='module' value='EMA'></td>
<td><a onclick="tester('EMA')">EMA</a></td>
<td>Today</td>
<td>Today</td>
<td>Hello</td>
</tr>
<tr>
<td><input type='checkbox' name='module' value='APN'></td>
<td><a onclick="tester('APN')">APN</a></td>
<td>Today</td>
<td>Today</td>
<td>Hello</td>
</tr>
<tr>
<td><input type='checkbox' name='module' value='APS'></td>
<td><a onclick="tester('APS')">APS</a></td>
<td>Today</td>
<td>Today</td>
<td>Hello</td>
</tr>
<tr>
<td><input type='checkbox' name='module' value='AG'></td>
<td><a onclick="tester('AG')">AG</a></td>
<td>Today</td>
<td>Today</td>
<td>Hello</td>
</tr>
<tr>
<td><input type='checkbox' name='module' value='USERSPACE'></td>
<td><a onclick="tester('USERSPACE')">USERSPACE</a></td>
<td>Today</td>
<td>Today</td>
<td>Hello</td>
</tr>
<tr>
<td><input type='checkbox' name='module' value='OTHER'></td>
<td><a onclick="tester('OTHER')">OTHER</a></td>
<td>Today</td>
<td>Today</td>
<td>Hello</td>
</tr>
</table>
<br>
<div id="kya-bakchodi-hai"></div>
</body>Given my code snippet above, I define my data inside the controller. Inside HTML, when I click on one of the modules inside the table, it should display another table. For that purpose I utilize the tester() function inside my script, which substitutes a written HTML snippet into the div I want using document.getElementById() .
It should then display the table based on the module selected, for which I use ng-repeat, and I also plan to use ng-if as well. But ng-repeat does not seem to work. Please help.
