如何通过 ng-model 选择一个 ng-option

Question

我有一个使用 ng-repeat 填充的表。例如，假设我正在创建一个 evite 类型的模拟站点，并且该表显示了所有已响应的人。 Each row has a radio button which, when selected, will populate additional information in a div below the table.此 div 也用作回复和更新现有回复的模板。当我从上表中选择一行时，将填充此 div 中的字段。其中一个字段是使用 ng-options 填充的选择下拉框。这些选项显示“YES”、“NO”和“MAYBE”，但是当将响应发送回服务时，它分别需要一个代码号“1”、“2”或“3”。我的 ng-options 如下所示：

ng-options="decision.decisionCode as decision.decisionDescription for decision in vm.decisionList"

我的问题是，当我从表中选择一行时，我无法显示该选项。我尝试将 select 的 ng-model 设置为 decisionCode、decisionDescription 和对象，但下拉列表仍然为空白。如何为 select 分配 ng-model 以显示表格中的选定值？

<div class="col-md-2 ">
    <select class="form-control" id="decision" ng-model="vm.decisionSelected" ng-options="decision.decisionCode as decision.decisionDescription for decision in vm.decisionList"></select>
</div>

vm.decisionList：

[{
"decisionCode": "1",
"decisionDescription": "YES"
}, {
"decisionCode": "2",
"decisionDescription": "NO"
}, {
"decisionCode": "3",
"decisionDescription": "MAYBE"
}]

Answer 1

我试过你的代码，它对我来说很好用。您应该研究的一件事是如何设置控制器。我假设您正在使用 Controller As 语法考虑到您的 sn-p，因此您的控制器必须至少看起来像这样：

angular.module('app')
    .controller('myController', myController);

function myController() {
    var vm = this;             // This is necessary for Controller As syntax to work
    vm.decisionSelected = "1"; // Assuming you want a default value
    vm.decisionList = [
        {
            "decisionCode": "1",
            "decisionDescription": "YES"
        }, 
        {
            "decisionCode": "2",
            "decisionDescription": "NO"
        }, 
        {
            "decisionCode": "3",
            "decisionDescription": "MAYBE"
        }];
}

如果您将 vm.decisionList 设置为 $scope 变量而不是这个，则它是 $scope.decisionList，Controller As 语法将无法识别它，因此您需要删除“vm”。在你的 ng 选项中