Question

我无法从多组单选按钮中检索值。理想情况下，我想将选定的单选按钮存储在一个数组中，然后将它们插入到数据库中。我对在ng-repeat中使用ng-model的内容感到困惑，因为我相信每个单选按钮组都应该有自己的ng-model属性。

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

(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文件：

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

这是fiddle。

Answer 1

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

ng-model="game.selectedTeam"

选择单选按钮时，＆＃39;值＆＃39;为该单选按钮指定的将在游戏中设置。选择团队＆＃39;属性。

见工作fiddle here

编辑：添加验证并将请求创建保存到小提琴。

AngularJS - ng-重复多个单选按钮组，值到数组

1 个答案: