Question

我正在为我的家人建立一个应用程序，允许你为每周的每个nfl游戏挑选。我有一个下降，周满了几周。当用户选择一周时，它会在页面上填充该周的所有游戏以及每个游戏的下拉列表，以便用户可以进行选择。虽然选择可以很好地更新并且绑定正常工作，但是在页面加载时我遇到问题，它不会使用数据库中的选择填充下拉列表。我尝试过不同的东西，比如ng-init，但没有运气。

我正在使用带有Jade模板的自定义MEAN堆栈。这是我的玉石片段

div(ng-controller='picksController')
h1 These are the picks
select.form-control(ng-model="selectedWeek", ng-change="getWeek(selectedWeek)", ng-options="week.week for week in weeks")
    option(value="") Select Week
div(ng-show="picks != null", ng-repeat="game in picks")
    hr.divider
    .panel.panel-primary
        .panel-heading
            h5 {{teamsMap[game.homeTeam].city + " " + teamsMap[game.homeTeam].name}} vs {{teamsMap[game.awayTeam].city + " " + teamsMap[game.awayTeam].name}}
            select.form-control(ng-model="game.pick")
                option(value='{{teamsMap[game.homeTeam].id}}') {{teamsMap[game.homeTeam].name}}
                option(value='{{teamsMap[game.awayTeam].id}}') {{teamsMap[game.awayTeam].name}}
        .panel-body
button.btn.btn-primary.submitButton(ng-show="picks != null", ng-click="updatePicks()") Submit

HTML版本：

<div ng-controller='picksController'>
<h1>These are the picks</h1>
<select class="form-control" ng-model="selectedWeek", ng-change="getWeek(selectedWeek)", ng-options="week.week for week in weeks">
    <option value="">Select Week</option>
</select>
<div ng-show="picks != null", ng-repeat="game in picks">
    <hr class="divider">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h5>{{teamsMap[game.homeTeam].city + " " + teamsMap[game.homeTeam].name}} vs {{teamsMap[game.awayTeam].city + " " + teamsMap[game.awayTeam].name}}</h5>
            <select class="form-control" ng-model="game.pick">
                <option value="{{teamsMap[game.homeTeam].id}}">{{teamsMap[game.homeTeam].name}}</option>
                <option value="{{teamsMap[game.awayTeam].id}}">{{teamsMap[game.awayTeam].name}}</option>
            </select>
        </div>
        <div class="panel-body">

        </div>
    </div>
</div>
<button class="btn btn-primary submitButton" ng-show="picks != null", ng-click="updatePicks()"> Submit </button>

和我的角度控制器

angular.module('app').controller('picksController', function($scope, bfNotifier, bfIdentity, bfPicks, bfWeeks, bfGames, bfTeams) {
$scope.teamsMap = {};
var teams = bfTeams.query(function() {
    for(var i = 0; i < teams.length; i++) {
        $scope.teamsMap[teams[i].id] = teams[i];
    }
});

$scope.weeks = bfWeeks.query();

$scope.getWeek = function(week) {
    if(week != null) {
        $scope.picks = bfPicks.query({"week": week.week, "user": bfIdentity.currentUser.username});
    }
}

}）

选择JSON的结构如此......

pick {
    user: xxx,
    week: xxx,
    game: xxx,
    homeTeam: xxx,
    awayTeam: xxx,
    pick: xxx
}

周

week {
    id: xxx,
    week: xxx
}

即使你无法回答我的问题，如果你能引导我朝着正确的方向前进。有时让其他人查看我的代码会有所帮助。谢谢！

Answer 1

您的默认值应为“xxx”
因为你将模型“game.pick”与pick [“pick”]链接起来。

Answer 2

如果你没有使用Jade（用html小提琴？），我可以提供更多帮助，但我没有看到你在任何地方使用ng-options。您希望在处理选择时使用ng-options。

AngularJS默认选择值

2 个答案: