angularjs - Angular JS - 获取选择控件的选定文本

Question

我已按照以下链接解决了该问题，但没有成功: How to get option text value using AngularJS?

我有一个包含一组服务器的下拉列表。当我从下拉列表中选择一个值时，我希望所选值显示在单独的 div 中。这是我所做的:

选择控件:

 <select name="source" class="form-control input-sm"
                        ng-model="filterOptions.hostId"
                        ng-options="s.id as s.hostName for s in physicalServerList"
                        ng-style="{'width':'100%'}">
                </select>

显示选定的文本:

<span class="pull-left">Source: {{ filterOptions.hostId.hostName }}</span>

但是，这不会显示所选文本。我做错了什么？

Answer 1

它不会显示所选文本，因为您的模型将具有所选项目的 id，因为使用 s.id as s.hostName (选择作为标签语法) 在 ng-options 中。只需从语法中删除 select as 部分，让 ng-model 保存所选对象的引用本身，而不仅仅是 id。

所以你的 ng-option:-

ng-model="filterOptions.host"
ng-options="s.hostName for s in physicalServerList track by s.id"

您的模型将是所选对象，而不仅仅是所选项目的 ID

<span class="pull-left">Source: {{ filterOptions.host.hostName }}</span>

<强> Plnkr