5

問題を解決するために次のリンクをたどりましたが、うまくいきませんでした: 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>

ただし、これは選択したテキストを表示しません。私は何を間違っていますか？

4

2 に答える 2

7

ng-optionsでs.id as s.hostName( )が使用されているため、モデルには選択したアイテムの ID が含まれるため、選択したテキストは表示されません。select as label syntax構文からその部分を削除するselect asだけで、id だけでなく、選択したオブジェクトの参照自体を ng-model に保持させることができます。

だからあなたの 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>

プランク

于 2014-09-21T15:58:56.450 に答える
4

この機能を試してください：

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>

于 2015-02-19T16:23:01.810 に答える