JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app class="container" ng-controller="PicksheetController" >
<form ng-submit="submitClickHandler()">
<table id="p4c-table" class="table table-striped table-responsive">
<thead>
<tr>
<th>FAVORITE</th><th>POINTS</th><th>UNDERDOG</th><th>SELECTED</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="game in games" ng-style="{'color': game.error?'red':''}">
<td>
<div class="switch-field">
<input id="{{ game.fav_nickname }}" type="radio" ng-model="game.selectedTeam" value="{{ game.fav_nickname }}" name="{{ game.game_id }}" />
<label for="{{ game.fav_nickname }}" class="hvr-box-shadow-inset pull-right">{{ game.fav_nickname }}</label>
</div>
</td>
<td class="text-center">{{ game.points }}</td>
<td class="text-right">
<div class="switch-field">
<input id="{{ game.und_nickname }}" type="radio" ng-model="game.selectedTeam" value="{{ game.und_nickname }}" name="{{ game.game_id }}" />
<label class="hvr-box-shadow-inset" for="{{ game.und_nickname }}">{{ game.und_nickname }}</label>
</div>
</td>
<td class="text-center">{{ game.selectedTeam }}</td>
</tr>
</tbody>
</table>
<div class="buttonHolder col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-3">
<div ng-if="hasErrors">Errors exist. Please fix the highlighted items before proceeding.</div>
<input type = "submit" name = "submit_form", value = "SUBMIT PICKS"/></div>
</form>
</div>
JavaScript
function PicksheetController($scope) {
$scope.submitClickHandler = function () {
$scope.hasErrors = false;
var saveRequest = [];
for(var i=0; i<$scope.games.length; i++) {
var game = $scope.games[i];
if(!game.selectedTeam) {
game.error = true;
$scope.hasErrors = true;
} else {
game.error = false;
saveRequest.push({game_id: game.game_id, selectedTeam: game.selectedTeam});
}
}
if(!$scope.hasErrors) {
// ToDo: Add Save Implementation Here
// This is the save request to be sent to the server
console.log(saveRequest);
}
}
$scope.games = [{"game_id":"206","fav_nickname":"Cincinnati","fav_sn":"CIN","und_nickname":"Baltimore","und_sn":"BAL","points":"0","favorite":"Cincinnati Bengals","underdog":"Baltimore Ravens"},{"game_id":"207","fav_nickname":"Buffalo","fav_sn":"BUF","und_nickname":"NY Jets","und_sn":"NYJ","points":"3.5","favorite":"Buffalo Bills","underdog":"New York Jets"},{"game_id":"208","fav_nickname":"Tampa Bay","fav_sn":"TB","und_nickname":"Carolina","und_sn":"CAR","points":"4.5","favorite":"Tampa Bay Buccaneers","underdog":"Carolina Panthers"},{"game_id":"209","fav_nickname":"Minnesota","fav_sn":"MIN","und_nickname":"Chicago","und_sn":"CHI","points":"6","favorite":"Minnesota Vikings","underdog":"Chicago Bears"},{"game_id":"210","fav_nickname":"Pittsburgh","fav_sn":"PIT","und_nickname":"Cleveland","und_sn":"CLE","points":"6","favorite":"Pittsburgh Steelers","underdog":"Cleveland Browns"},{"game_id":"211","fav_nickname":"Philadelphia","fav_sn":"PHI","und_nickname":"Dallas","und_sn":"DAL","points":"4.5","favorite":"Philadelphia Eagles","underdog":"Dallas Cowboys"},{"game_id":"212","fav_nickname":"New England","fav_sn":"NE","und_nickname":"Miami","und_sn":"MIA","points":"9.5","favorite":"New England Patriots","underdog":"Miami...