AngularJS默认选择值

Question

I'm building a application for my family that allows you make picks for each nfl game for each week. I have a drop down that is populated with the weeks. When a user selects a week, it populates the page with all the games for that week and a dropdown for each game so that the user can make their pick. While the pick can be updated just fine and the binding is working, I have a problem when the page is loaded, it will not populate the dropdown with the pick that is in the database. I've tried different things such as ng-init but no luck.

I am using a Custom MEAN Stack with Jade Templates. Here is a snippet of my jade

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 version:

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

and my angular controller

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

})

The picks JSON is structured like so...

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

week

week {
    id: xxx,
    week: xxx
}

Even if you can't answer my question, if you can lead me in the right direction. Sometimes it helps to have someone else look at my code. Thanks!

Answer 1

Your default value should be "xxx"
as you are linking your model "game.pick" with pick["pick"] .

Answer 2

I could be more help if you weren't using Jade (put up a fiddle with html?), but I don't see you using ng-options anywhere. You want to use ng-options when dealing with selects.