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

我已通过以下链接解决了该问题，但没有成功：

我有一个包含一组服务器的下拉列表。当我从下拉列表中选择一个值时，我希望所选值显示在一个单独的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>

Source:{{filterOptions.hostId.hostName}

---

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

它不显示所选文本，因为您的模型将具有所选项目的id，因为在ng选项中使用了

s.id作为s.hostName

（

select as label syntax

）。只需从语法中删除

select as

部分，让ng模型保存所选对象的引用本身，而不仅仅是id

因此，您的ng选项：-

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>

Source:{{filterOptions.host.hostName}

尝试以下功能：

var hostApp=angular.module（'hostApp'，[]）；
hostApp.controller（'hostController'，函数（$scope）{
$scope.options=[
{值：'1'，标签：'hosting1'}，
{值：'2'，标签：'hosting2'}，
{值：'3'，标签：'hosting3'}
];
$scope.hostSelected=$scope.options[0]；
});

值：{{hostSelected.value}}
标签：{{hostSelected.label}