AngularJS Example:
HTML
<div ng-app="myApp">
<div ng-controller="HomeCtrl">
<table class="table">
<thead>
<tr>
<th><b>User</b></th>
<th ng-repeat="m in rowData">
<b>{{m.column_name}}</b>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td ng-repeat="row in rowData">
<input ng-model="user.answer" ng-if="row.type == 'text'" type="text" />
<input ng-model="user.check" type="checkbox" ng-if="row.type == 'checkbox'" />
<select ng-model="user.selected" ng-if="row.type == 'select'">
<option ng-repeat="option in row.options" value="{{option}}">{{option}}</option>
</select>
</td>
</tr>
</tbody>
</table>
<button type="button" ng-click="print()">
Print Result
</button>
</div>
</div>
CSS
table {
width: 100%;
border-collapse: initial;
border-spacing: 2px;
}
tr td, tr th {
border: 1px solid black;
text-align: center;
}
JavaScript
var myApp = angular.module('myApp', []);
myApp.controller('HomeCtrl', function ($scope) {
$scope.users = [{name: "Aileen Mottern"}, {name: "Abraham Lincoln"}];
$scope.rowData = [{
column_name: "Required Headset",
options: ["one", "two", "three"],
required: "true",
type: "select",
u_req_headset: "",
answer: "answer1"
}, {
column_name: "Primary Contact Number",
options: [],
required: "true",
type: "text",
u_primary_contact_number: "",
answer: "answer2"
}];
$scope.print = function() {
console.log($scope.users);
}
});