当 select 元素动态生成 ng-repeat 时设置 selected 选项

Question

我正在尝试基于数组动态生成 select 个元素：

[
  ["Air travel program","Yes",[["--"],["Yes"],["No"]]],
  ["Car rental program","--",[["--"],["Yes"],["No"]]],
  ["Data management","--",[["--"],["Yes"],["No"]]],
  ["Group travel","--",[["--"],["Yes"],["No"]]],
  ["Hotel Program","--",[["--"],["Yes"],["No"]]],
  ["Payment systems","--",[["--"],["Yes"],["No"]]],
  ["Transient travel","--",[["--"],["Yes"],["No"]]],
  ["Travel policy","No",[["--"],["Yes"],["No"]]]
]

我的HTML:

<div class="profileRow"  ng-repeat="btpPDropdown in BTPProfileSelectList">
                    <label class="profileLabel">
                                            {{btpPDropdown[0]}}
                    </label>
                    <select name="{{btpPDropdown[0]}}" >
                                            <option ng-repeat="btpOption in btpPDropdown[2]">{{btpOption[0]}}</option>
                    </select>

这会按预期生成 select 元素和选项，但我不知道如何设置默认的 selected 选项，应该是 {{btpPDropdown[1]}}，或者是在第一个 select。据我了解，select 会将 selected 选项设置为匹配的选项字符串。我尝试设置 ng-model="{{btpPDropdown[1]}}" 但这无效，因为它不是唯一的。任何帮助让它工作的人都将不胜感激。

Answer 1

您所拥有的问题是您没有将 select 绑定到模型。在 select 本身上提供模型允许您将其绑定到数组。这样，当更改下拉列表时，它将反映在实际数组中。

修改后的代码：

<div class="profileRow"  ng-repeat="btpPDropdown in BTPProfileSelectList">
    <label class="profileLabel">
      {{btpPDropdown[0]}}
    </label>
    <select name="{{btpPDropdown[0]}}" ng-model="btpPDropdown[1]">
      <option ng-repeat="btpOption in btpPDropdown[2]" >{{btpOption[0]}}</option>
    </select>
</div>

当 select 元素动态生成 ng-repeat 时设置 selected 选项

Set selected option when select elements dynamically generated ng-repeat

angularjs

drop-down-menu

ng-repeat