AngularJS-ng重复多个单选按钮组，将值复制到数组 [英] AngularJS - ng-repeat multiple radio button groups, values to array

问题描述

我无法从多组单选按钮检索值.理想情况下，我想将选定的单选按钮存储在一个数组中，然后将其插入数据库中.我开始对ng-repeat内的ng-model使用什么感兴趣，因为我相信每个单选按钮组都应具有自己的ng-model属性.

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.

这是我的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>

这是我的app.js文件:

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: '/'
        });
});

}());

这是我的控制人:

(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)

}());

这是我的picksheet.php文件:

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);
?>

这是小提琴.

推荐答案

对于每个单选按钮，添加以下ng-model绑定

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

ng-model="game.selectedTeam"

选择单选按钮后，将在"game.selectedTeam"属性中设置为该单选按钮指定的值".

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

查看正在运行的在此处进行修饰

添加了验证并将请求创建保存到小提琴中.

Added validation and save request creation to the fiddle.

这篇关于AngularJS-ng重复多个单选按钮组，将值复制到数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！