AngularJS - ng-repeat multiple radio button groups, values to array

Question

I am having trouble retrieving the values from multiple groups of radio buttons. Ideally, I would like to store the selected radio buttons in an array and insert them into a database. I'm getting hung up on what to use for the ng-model inside the ng-repeat, as I believe each radio button group should have its own ng-model attribute.

Here is my html:

        <table id="p4c-table" class="table table-striped table-responsive">
            <thead>
                <tr>
                    <th>FAVORITE</th><th>POINTS</th><th>UNDERDOG</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="game in games">
                    <td>
                        <div class="switch-field">
                            <img class="logo-left remove" src="./assets/img/logos/{{ game.fav_sn }}.gif" alt="{{ game.favorite }}">
                            <input id="{{ game.fav_nickname }}" type="radio" 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" value="{{ game.und_nickname }}" name="{{ game.game_id }}" />
                            <label class="hvr-box-shadow-inset" for="{{ game.und_nickname }}">{{ game.und_nickname }}</label>
                            <img class="logo-right remove" src="./assets/img/logos/{{ game.und_sn }}.gif" alt="{{ game.underdog }}">
                        </div>
                    </td>
                </tr>

            </tbody>
            <tfoot>
                <tr><th colspan="5"><i>Home teams capitalized in bold</i></th></tr> 
            </tfoot>
        </table>

Here is my app.js file:

(function() {

var app = angular.module("app", ['ngRoute']);

app.config(function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'templates/home.html'
        })
        .when('/picksheet', {
            templateUrl: 'templates/picksheet.html',
            controller: 'PicksheetController'
        })
        .otherwise({
            redirectTo: '/'
        });
});

}());

Here is my controller:

(function() {

var application = angular.module('app');
var PicksheetController = function($scope, $http, $log) {

    $http.get('./resources/picksheet.php')
        .success(function(data) {
            $scope.games = data;
            console.log(data);
        })
        .error(function(err) {
            $log.error(err);
        })

}

application.controller("PicksheetController", PicksheetController)

}());

Here is my picksheet.php file:

<?php

include __DIR__ . '\config.php';

$conn = new mysqli($host, $user, $pass, $db);

if($conn->connect_errno) {
    die("Database Connection failed:" . $conn->connect_errno);
}

$sql = 'SELECT A.game_id, B.team_nickname AS fav_nickname, fav_sn, C.team_nickname AS und_nickname, und_sn, points, favorite, underdog
        FROM p4c_games A
        JOIN p4c_teams B ON A.favorite = B.team_fn
        JOIN p4c_teams C ON A.underdog = C.team_fn
        JOIN p4c_current_week_season D ON A.week = D.week AND A.season = D.season
        ORDER BY A.game_id';

$qry = $conn->query($sql);

$data = array();

if($qry->num_rows > 0) {
    while($row = $qry->fetch_object()) {
        $data[] = $row;
    }
} else {
    $data[] = null;
}

$conn->close();

echo json_encode($data);
?>

Here is a fiddle.

i'd recommend adding a [pen](http://codepen.io/)/[fiddle](https://jsfiddle.net/)/[plunker](https://plnkr.co/edit/?p=catalogue). more are likely to help. — alphapilgrim, May 19 '17 at 16:19

CodeWarrior · Accepted Answer · 2017-05-19T20:27:45.453

0

For each of the radio buttons, add the following ng-model binding

ng-model="game.selectedTeam"

When a radio button is selected, the 'value' specified for that radio button will be set in the 'game.selectedTeam' attribute.

See working fiddle here

Edit: Added validation and save request creation to the fiddle.

edited May 19 '17 at 20:27

answered May 19 '17 at 17:39

CodeWarrior

2,721
3
18
18

Thank you for the answer. How can I store those values so that I can then insert into a database? I was thinking of a list that I could then use as validation on the submit button, so it couldn't be submitted until the appropriate number of games were selected. – putty May 19 '17 at 19:07
Your selections will be saved in the original $scope.games object. You can iterate over that and perform validations. I've updated the original fiddle to perform validations and highlight the rows which do not have any selections. – CodeWarrior May 19 '17 at 20:14
To answer your question about saving to the server, you can either send the whole games object to the server or, if you think that is too heavy, you can create a save request with only the game id and the selection. I've added that as well to the fiddle. – CodeWarrior May 19 '17 at 20:26

AngularJS - ng-repeat multiple radio button groups, values to array

1 Answers1

Linked