AngularJS - ng-repeat 多个单选按钮组，数组的值 [英] AngularJS - ng-repeat multiple radio button groups, values to array
问题描述
我无法从多组单选按钮中检索值.理想情况下，我想将选定的单选按钮存储在一个数组中并将它们插入到数据库中.我对 ng-repeat 中的 ng-model 使用什么很感兴趣，因为我相信每个单选按钮组都应该有自己的 ng-model 属性.
这是我的 html:
<头><tr><th>最喜欢的</th><th>POINTS</th><th>UNDERDOG</th></tr></thead><tr ng-repeat="游戏中的游戏"><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></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 }}">
</td></tr></tbody><脚><tr><th colspan="5"><i>主队以粗体大写</i></th></tr></tfoot>
这是我的 app.js 文件:
(function() {var app = angular.module("app", ['ngRoute']);app.config(function($routeProvider) {$routeProvider.什么时候('/'， {templateUrl: 'templates/home.html'}).when('/picksheet', {templateUrl: 'templates/picksheet.html',控制器:'PicksheetController'}).除此以外({重定向到:'/'});});}());这是我的控制器:
(function() {var application = angular.module('app');var PicksheetController = function($scope, $http, $log) {$http.get('./resources/picksheet.php').成功(功能(数据){$scope.games = 数据；控制台日志(数据)；}).错误(功能(错误){$log.error(err);})}application.controller("PicksheetController", PicksheetController)}());这是我的picksheet.php文件:
connect_errno){die("数据库连接失败:" . $conn->connect_errno);}$sql = 'SELECT A.game_id, B.team_nickname AS fav_nickname, fav_sn, C.team_nickname AS und_nickname, und_sn, 积分, 最爱, 弱队从 p4c_games A加入 p4c_teams B ON A.favorite = B.team_fn加入 p4c_teams C ON A.underdog = C.team_fn加入 p4c_current_week_season D ON A.week = D.week AND A.season = D.seasonORDER BY A.game_id';$qry = $conn->query($sql);$data = 数组();如果($qry-> num_rows > 0){while($row = $qry->fetch_object()) {$data[] = $row;}} 别的 {$数据[] = 空；}$conn->close();回声 json_encode($data);?>这是一个小提琴.
对于每个单选按钮，添加以下 ng-model 绑定
ng-model="game.selectedTeam"选择单选按钮后，将为该单选按钮指定的值"将在game.selectedTeam"属性中设置.
添加验证并将请求创建保存到小提琴.
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.
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.
这篇关于AngularJS - ng-repeat 多个单选按钮组，数组的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
