javascript - Angular 选择的选项被忽略

Question

我有这个 HTML:

<div class="form-group" ng-hide="controller.sports.loading">
    <label for="sport">Sport</label>
    <div class="input-group">
        <div class="input-group-addon">2</div>
        <select class="form-control" id="sport" ng-model="controller.team.data.sport">
            <option ng-repeat="sport in controller.sports.data" value="{{ sport.slug }}">
                {{ sport.title }}
            </option>
        </select>
    </div>
</div>

如您所见，模态绑定(bind)是controller.team.data.sport。如果我看一下，它包含一个运动蛞蝓(例如网球)。但即使填充了此内容，也没有选定的选项。我想这可能是因为我的ng-repeat。我将值设置为 sport.slug，但文本设置为 sport.title。

如何让我选择的选项基于 sport.slug？

以下是该模型的示例:

var team = {
    loading: false,
    data: {
        id: 1,
        name: 'Test',
        sport: 'tennis'
    }
};

Answer 1

我认为你应该使用ng-options

<select ng-model="controller.team.data.sport" ng-options="sport.slug as sport.title for sport in controller.sports.data">
</select>

编辑:我一开始就搞乱了 sport.slug 和 sport.title 的顺序