角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，因为在ng选项中使用了s.id as 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" 

和模型将成为选择的对象，而不是选择的项目

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

Plnkr

Answer 2

尝试只是ID此功能：

var hostApp = angular.module('hostApp', []); 
 
    hostApp.controller('hostController', function($scope) { 
 
    
 
     $scope.options = [ 
 
      { value: '1', label:'hosting1' }, 
 
      { value: '2', label:'hosting2' }, 
 
      { value: '3', label:'hosting3' } 
 
     ]; 
 
     
 
     $scope.hostSelected = $scope.options[0]; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="hostApp"> 
 
    <div ng-controller="hostController"> 
 
     <select ng-model="hostSelected" 
 
       ng-options="opt as opt.label for opt in options"> 
 
      </select> 
 
     <div>value: {{ hostSelected.value }} <br />label: {{ hostSelected.label }}</div> 
 
    </div> 
 
</div>