多くの人（私を含む）を悩ませているようです。

ng-optionsAngularJS のディレクティブを使用して<select>タグのオプションを入力するとき、オプションの値を設定する方法がわかりません。これのドキュメントは本当に不明確です-少なくとも私のような単純な人にとっては。

私はオプションのテキストを次のように簡単に設定できます：

ng-options="select p.text for p in resultOptions"

resultOptionsたとえば、次のような場合です。

[
    {
        "value": 1,
        "text": "1st"
    },
    {
        "value": 2,
        "text": "2nd"
    }
]

これは、オプションの値を設定するための最も簡単な方法であるはずです（おそらくそうでしょう）が、今のところ、それを取得できません。

ngOptionsを参照してください

ngOptions（オプション） – { comprehension_expression=} –次のいずれかの形式：

配列データソースの場合： label for value in array select as label for value in array label group by group for value in array select as label group by group for value in array track by trackexpr オブジェクトデータソースの場合： label for (key , value) in object select as label for (key , value) in object label group by group for (key, value) in object select as label group by group for (key, value) in object

あなたの場合、それは

array = [{ "value": 1, "text": "1st" }, { "value": 2, "text": "2nd" }];

<select ng-options="obj.value as obj.text for obj in array"></select>

更新

AngularJSの更新により、式valueをselect持つ要素の属性に実際の値を設定できるようになりましたtrack by。

<select ng-options="obj.text for obj in array track by obj.value">
</select>

この醜いものを覚える方法

この構文形式を覚えるのに苦労しているすべての人に：これが最も簡単で美しい構文ではないことに同意します。この構文は、Pythonのリスト内包表記の拡張バージョンの一種であり、構文を簡単に思い出すのに役立ちます。それは次のようなものです：

Pythonコード：

my_list = [x**2 for x in [1, 2, 3, 4, 5]]
> [1, 4, 9, 16, 25]

# Let people to be a list of person instances
my_list2 = [person.name for person in people]
> my_list2 = ['Alice', 'Bob']

これは実際には上記の最初の構文と同じです。ただし、<select>通常、コード内の実際の値と<select>要素内に表示されるテキスト（ラベル）を区別する必要があります。

同様person.idに、コードに必要ですidが、ユーザーにを表示したくありません。名前を表示します。同様person.nameに、コードのには興味がありません。asラベルを付けるキーワードがあります。したがって、次のようになります。

person.id as person.name for person in people

または、代わりにインスタンス/参照自体person.idが必要になるperson場合があります。下記参照：

person as person.name for person in people

JavaScriptオブジェクトの場合も、同じメソッドが適用されます。オブジェクトのアイテムは(key, value)ペアで分解されることを覚えておいてください。

値属性がその値を取得する方法：

• 配列をデータソースとして使用する場合、それは各反復における配列要素のインデックスになります。
• オブジェクトをデータソースとして使用する場合、それは各反復のプロパティ名になります。

したがって、あなたの場合はそれは次のようになります：

obj = { '1': '1st', '2': '2nd' };

<select ng-options="k as v for (k,v) in obj"></select>

私もこの問題を抱えていました。ng-optionsに値を設定できませんでした。生成されたすべてのオプションは0、1、...、nで設定されました。

それを正しくするために、私は私のng-optionsでこのようなことをしました：

HTML：

<select ng-options="room.name for room in Rooms track by room.price">
    <option value="">--Rooms--</option>
</select>

「track by」を使用して、すべての値をで設定しますroom.price。

（この例では問題があります：等しい価格が複数ある場合、コードは失敗します。そのため、値が異なることを確認してください。）

JSON：

$scope.Rooms = [
            { name: 'SALA01', price: 100 },
            { name: 'SALA02', price: 200 },
            { name: 'SALA03', price: 300 }
        ];

Angular.JS ng-options＆track byを使用して、select要素の初期選択値を設定する方法をブログ投稿から学びました。

ビデオを見る。それは素晴らしいクラスです:)

optionフォームが最終的にサーバーに送信されるため、要素の値を変更する場合は、これを行うのではなく、

<select name="text" ng-model="text" ng-options="select p.text for p in resultOptions"></select>

あなたはこれを行うことができます：

<select ng-model="text" ng-options="select p.text for p in resultOptions"></select>
<input type="hidden" name="text" value="{{ text }}" />

期待値は、正しい名前でフォームを介して送信されます。

my_hero通常のフォーム送信を使用して呼び出されたカスタム値をサーバーに送信するには：

JSON：

"heroes": [
  {"id":"iron", "label":"Iron Man Rocks!"},
  {"id":"super", "label":"Superman Rocks!"}
]

HTML：

<select ng-model="hero" ng-options="obj.id as obj.label for obj in heroes"></select>
<input type="hidden" name="my_hero" value="{{hero}}" />

サーバーは、ironまたはsuperの値としてを受け取りますmy_hero。

これは@neemzyの回答に似ていますが、value属性に個別のデータを指定します。

使用するのng-optionsは複雑（おそらくイライラする）のようですが、実際にはアーキテクチャの問題があります。

AngularJSは、動的HTML + JavaScriptアプリケーションのMVCフレームワークとして機能します。その（V）iewコンポーネントはHTMLの「テンプレート化」を提供しますが、その主な目的は、コントローラーを介したユーザーアクションをモデルの変更に接続することです。したがって、AngularJSで機能する適切な抽象化レベルは、select要素がモデルの値をqueryの値に設定することです。

• クエリの行がユーザに提示された方法（V）IEWの関心事であるとng-options提供foroption要素の内容がどうあるべきかを指示するキーワードすなわち p.text for p in resultOptions。
• 選択された行がサーバーにどのように提示されるかは、（M）odelの関心事です。したがって、ng-optionsでは、asモデルに提供される値を指定するためのキーワードが提供されk as v for (k,v) in objectsます。

これが問題である正しい解決策は、本来アーキテクチャーであり、（ユーザーがフォームを送信する代わりに）（M）odelが必要なときにサーバー通信を実行するようにHTMLをリファクタリングすることを含みます。

MVC HTMLページが目前の問題に対して必要以上に設計しすぎている場合： AngularJSの（V）iewコンポーネントのHTML生成部分のみを使用します。この場合、<li />'s under <ul />' などの要素の生成に使用されるのと同じパターンに従い、オプション要素にng-repeatを配置します。

<select name=“value”>
    <option ng-repeat=“value in Model.Values” value=“{{value.value}}”>
        {{value.text}}
    </option>
</select>

kludgeと同様に、select要素のname属性を常に非表示のinput要素に移動できます。

<select ng-model=“selectedValue” ng-options=“value.text for value in Model.Values”>
</select>
<input type=“hidden” name=“value” value=“{{selectedValue}}” />

あなたはこれを行うことができます：

<select ng-model="model">
    <option value="">Select</option>
    <option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>

-更新

いくつかの更新後、ユーザーfrm.adiputraのソリューションははるかに優れています。コード：

obj = { '1': '1st', '2': '2nd' };
<select ng-options="k as v for (k,v) in obj"></select>

私は今日しばらくの間、この問題に取り組んできました。私は、AngularJSのドキュメント、この記事やその他の投稿、およびそれらが導くいくつかのブログを読みました。これらはすべて、私がより詳細な説明を理解するのに役立ちましたが、結局これは混乱を招くトピックのようです。主に、の多くの構文上のニュアンスがあるためng-optionsです。

結局のところ、私にとっては、それはより少ないということです。

次のように構成されたスコープがあるとします。

        //Data used to populate the dropdown list
        $scope.list = [
           {"FirmnessID":1,"Description":"Soft","Value":1},         
           {"FirmnessID":2,"Description":"Medium-Soft","Value":2},
           {"FirmnessID":3,"Description":"Medium","Value":3}, 
           {"FirmnessID":4,"Description":"Firm","Value":4},     
           {"FirmnessID":5,"Description":"Very Firm","Value":5}];

        //A record or row of data that is to be save to our data store.
        //FirmnessID is a foreign key to the list specified above.
        $scope.rec = {
           "id": 1,
           "FirmnessID": 2
        };

これは私が望ましい結果を得るために必要なすべてです：

        <select ng-model="rec.FirmnessID"
                ng-options="g.FirmnessID as g.Description for g in list">
            <option></option>
        </select>   

私が使用しなかったことに注意してくださいtrack by。track by選択されたアイテムを使用すると、常に、FirmnessID自体ではなく、FirmnessIDに一致したオブジェクトが返されます。これは、オブジェクトではなく数値を返し、ng-options生成された各オプションに新しいスコープを作成しないことでパフォーマンスを向上させるために使用するという私の基準を満たしています。

また、空白の最初の行が必要だったので、単にを要素に追加し<option>ました<select>。

ここにあるPlunkr私の仕事を示しています。

新しい 'track by'機能を使用する代わりに、値をテキストと同じにしたい場合は、配列でこれを実行できます。

<select ng-options="v as v for (k,v) in Array/Obj"></select>

標準構文の違いに注意してください。これにより、値がオブジェクト/配列のキーになり、配列の0、1、2などになります。

<select ng-options"k as v for (k,v) in Array/Obj"></select>

k as vはv as vになります。

構文を見た常識に基づいてこれを発見しました。（k、v）は、配列/オブジェクトをキーと値のペアに分割する実際のステートメントです。

「k as v」ステートメントでは、kが値になり、vはユーザーに表示されるテキストオプションになります。「トラックバイ」は面倒でやり過ぎだと思います。

私によると、これはすべてのシナリオに最適でした。

<select ng-model="mySelection.value">
   <option ng-repeat="r in myList" value="{{r.Id}}" ng-selected="mySelection.value == r.Id">{{r.Name}}
   </option>
</select>

モデルを使用してデータをバインドできる場所。オブジェクトに含まれる値とシナリオに基づいたデフォルトの選択を取得します。

これが私がこれを解決した方法です。値による選択を追跡し、JavaScriptコードでモデルに選択された項目のプロパティを設定しました。

Countries =
[
    {
        CountryId = 1, Code = 'USA', CountryName = 'United States of America'
    },
    {
       CountryId = 2, Code = 'CAN', CountryName = 'Canada'
    }
]

<select ng-model="vm.Enterprise.AdminCountry" ng-options="country.CountryName for country in vm.Countries track by country.CountryId">

vmは私のコントローラーであり、サービスから取得したコントローラー内の国は{CountryId =1, Code = 'USA', CountryName='United States of America'}です。

選択ドロップダウンから別の国を選択し、「保存」でページを投稿すると、正しい国がバインドされました。

ng-optionsディレクティブは、上のvalue属性を設定していない<options>配列のための要素：

limit.value as limit.text for limit in limits手段を使用する：

<option>'のラベルを設定してlimit.text
、limit.value値をselectのng-model

Stack Overflowの質問AngularJS ng-optionsが値をレンダリングしないを参照してください。

<select ng-model="color" ng-options="(c.name+' '+c.shade) for c in colors"></select><br>

ng-optionsを使用して、値と表示メンバーへの選択タグのバインドを実現できます

このデータソースを使用している間

countries : [
              {
                 "key": 1,
                 "name": "UAE"
             },
              {
                  "key": 2,
                  "name": "India"
              },
              {
                  "key": 3,
                  "name": "OMAN"
              }
         ]

以下を使用して、selectタグを値と名前にバインドできます

<select name="text" ng-model="name" ng-options="c.key as c.name for c in countries"></select>

それはうまくいきます

現在、これがオプション要素の値属性を明示的に制御する唯一の方法であると思われるため、この質問に対する正しい答えは、ユーザーfrm.adiputraによって提供されています。

ただし、「select」はこのコンテキストのキーワードではなく、単なる式のプレースホルダーであることを強調したかっただけです。「select」式およびng-optionsディレクティブで使用できる他の式の定義については、次のリストを参照してください。

質問に示されているselectの使用：

ng-options='select p.text for p  in resultOptions'

本質的に間違っています。

式のリストに基づいて、オプションがオブジェクトの配列で指定されている場合、trackexprを使用して値を指定できるようですが、これはグループ化でのみ使用されています。

AngularJSのng-optionsのドキュメントから：

• array / object：反復する配列/オブジェクトに評価される式。
• value：反復中に配列の各項目またはオブジェクトの各プロパティ値を参照するローカル変数。
• key：反復中にオブジェクトのプロパティ名を参照するローカル変数。
• label：この式の結果は、要素のラベルになります。式は、おそらく値変数（たとえば、value.propertyName）を参照します。
• select：この式の結果は、親要素のモデルにバインドされます。指定しない場合、select式はデフォルトでvalueになります。
• group：この式の結果は、DOM要素を使用してオプションをグループ化するために使用されます。
• trackexpr：オブジェクトの配列を操作するときに使用されます。この式の結果は、配列内のオブジェクトを識別するために使用されます。trackexprは、おそらく値変数（たとえば、value.propertyName）を参照します。

ng-optionsで項目を選択することは、データソースの設定方法によっては、少し難しい場合があります。

しばらくの間それらと苦労した後、私は私が使用する最も一般的なデータソースでサンプルを作成することになりました。あなたはそれをここで見つけることができます：

http://plnkr.co/edit/fGq2PM?p=preview

ng-optionsを機能させるために、以下の点を考慮してください。

1. 通常、1つのソースからオプションを取得し、他のソースから選択した値を取得します。例えば：
   • 状態:: ng-optionsのデータ
   • user.state ::選択済みとして設定するオプション
2. 1に基づくと、最も簡単で論理的なことは、selectに1つのソースを入力し、選択された値のトラフコードを設定することです。まれに、混合データセットを取得する方が良いでしょう。
3. AngularJSでは、選択したコントロールでを保持できますkey | label。多くのオンラインの例では、オブジェクトを「キー」として配置しています。オブジェクトからの情報が必要な場合は、そのように設定します。それ以外の場合は、必要な特定のプロパティをキーとして使用します。（ID、CODEなど。plckrサンプルと同じ）

4. ドロップダウン/選択コントロールの値を設定する方法は、＃3によって異なります。

   • ドロップダウンキーが単一のプロパティの場合（plunkrのすべての例のように）、次のように設定するだけです。 $scope.dropdownmodel = $scope.user.state;

   • オブジェクトをキーとして設定する場合は、オプションを介してループする必要があります。オブジェクトを割り当てても、アイテムのハッシュキーが異なるため、選択されたアイテムは設定されません。例：

     for (var i = 0, len = $scope.options.length; i < len; i++) {
       if ($scope.options[i].id == savedValue) { // Your own property here:
         console.log('Found target! ');
         $scope.value = $scope.options[i];
         break;
       }
     }

他のオブジェクトの同じプロパティのsavedValueを置き換えることができます$scope.myObject.myProperty。

私にとって、ブルーノ・ゴメスの答えが最良の答えです。

しかし、実際には、selectオプションのvalueプロパティの設定について心配する必要はありません。AngularJSがそれを処理します。詳しく説明します。

このフィドルを検討してください

angular.module('mySettings', []).controller('appSettingsCtrl', function ($scope) {

    $scope.timeFormatTemplates = [{
        label: "Seconds",
        value: 'ss'
    }, {
        label: "Minutes",
        value: 'mm'
    }, {
        label: "Hours",
        value: 'hh'
    }];


    $scope.inactivity_settings = {
        status: false,
        inactive_time: 60 * 5 * 3, // 15 min (default value), that is, 900 seconds
        //time_format: 'ss', // Second (default value)
        time_format: $scope.timeFormatTemplates[0], // Default seconds object
    };

    $scope.activity_settings = {
        status: false,
        active_time: 60 * 5 * 3, // 15 min (default value), that is,  900 seconds
        //time_format: 'ss', // Second (default value)
        time_format: $scope.timeFormatTemplates[0], // Default seconds object
    };

    $scope.changedTimeFormat = function (time_format) {
        'use strict';

        console.log('time changed');
        console.log(time_format);
        var newValue = time_format.value;

        // do your update settings stuffs
    }
});

フィドル出力でわかるように、選択ボックスオプションで選択したものは何でも、それはカスタム値、またはAngularJSによって自動生成された0、1、2の値であり、jQueryまたは選択したコンボボックスオプションの値にアクセスし、それに応じて操作する他のライブラリ。

質問の1年後、少なくとも私には実際の答えが得られなかったため、この質問に対する答えを見つける必要がありました。

オプションの選択方法を尋ねましたが、これら2つが同じではないと誰も言っていません。

このようなオプションがある場合：

$scope.options = [
    { label: 'one', value: 1 },
    { label: 'two', value: 2 }
  ];

そして、我々はこのようなデフォルトオプションを設定しようとします：

$scope.incorrectlySelected = { label: 'two', value: 2 };

これは機能しませんが、次のようなオプションを選択しようとすると、

$scope.correctlySelected = $scope.options[1];

うまくいきます。

これら2つのオブジェクトは同じプロパティを持っていますが、AngularJSは参照によって比較するため、AngularJSはそれらをDIFFERENTと見なしています。

フィドルhttp://jsfiddle.net/qWzTb/をご覧ください。

選択ボックスの値とラベルを区別するプロパティ別トラックを使用してください。

してみてください

<select ng-options="obj.text for obj in array track by obj.value"></select>

これは、ラベルをテキストで、値を値で（配列から）割り当てます

オブジェクトの場合：

<select ng-model="mySelect" ng-options="key as value for (key, value) in object"></select>

開発者がng-optionsを使用することは常に苦痛です。例：selectタグで空/空白の選択値を取得します。特にng-optionsでJSONオブジェクトを処理する場合は、面倒になります。ここでは、いくつかの演習を行いました。

目的：ng-optionを使用してJSONオブジェクトの配列を反復処理し、選択した最初の要素を設定します。

データ：

someNames = [{"id":"1", "someName":"xyz"}, {"id":"2", "someName":"abc"}]

selectタグでは、xyzとabcを表示する必要がありましたが、xyzはそれほど手間をかけずに選択する必要があります。

HTML：

<pre class="default prettyprint prettyprinted" style=""><code>
    &lt;select class="form-control" name="test" style="width:160px"    ng-options="name.someName for name in someNames" ng-model="testModel.test" ng-selected = "testModel.test = testModel.test || someNames[0]"&gt;
&lt;/select&gt;
</code></pre>

上記のコードサンプルにより、この誇張から抜け出すことができます。

別のリファレンス：

チュートリアルANGULAR.JS：NG-SELECT AND NG-OPTIONSは問題の解決に役立ちました：

<select id="countryId"
  class="form-control"
  data-ng-model="entity.countryId"
  ng-options="value.dataValue as value.dataText group by value.group for value in countries"></select>

<select ng-model="output">
   <option ng-repeat="(key,val) in dictionary" value="{{key}}">{{val}}</option>
</select>

コードスニペットを実行して、バリエーションを確認します。ここに簡単な理解のための注意があります

1. 例1（オブジェクトの選択）：- ng-option="os.name for os in osList track by os.id"。ここtrack by os.idは重要であり、そこにあるべきであり、前に持ってos.id as はいけませんos.name。

   • は、のようなIDng-model="my_os"としてキーを持つオブジェクトに設定する必要があります。my_os={id: 2}

2. 例2（値の選択）：- ng-option="os.id as os.name for os in osList"。ここtrack by os.id べきではありませんがあるとos.id as する必要があります前にありos.name。

   • は次のng-model="my_os"ような値に設定する必要がありますmy_os= 2

残りのコードスニペットで説明します。

angular.module('app', []).controller('ctrl', function($scope, $timeout){
  
  //************ EXAMPLE 1 *******************
  $scope.osList =[
    { id: 1, name :'iOS'},
    { id: 2, name :'Android'},
    { id: 3, name :'Windows'}
  ]
  $scope.my_os = {id: 2};
  
  
  //************ EXAMPLE 2 *******************
  $timeout(function(){
    $scope.siteList = [
          { id: 1, name: 'Google'},
          { id: 2, name: 'Yahoo'},
          { id: 3, name: 'Bing'}
        ];
   }, 1000);
    
    $scope.my_site = 2;
  
    $timeout(function(){
      $scope.my_site = 3;
    }, 2000);
})

fieldset{
  margin-bottom: 40px;
  }
strong{
  color:red;
  }

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

<div ng-app="app" ng-controller="ctrl">

  <!--//************ EXAMPLE 1 *******************-->
  <fieldset>
    <legend>Example 1 (Set selection as <strong>object</strong>)</legend>
    
    <select ng-model="my_os" ng-options="os.name for os in osList track by os.id">
        <option value="">--Select--</option>
      </select>
    {{my_os}}
    
  </fieldset>
  
  
  <!--//************ EXAMPLE 2 *******************-->
  <fieldset>
    <legend>Example 2 (Set selection as <strong>value</strong>. Simulate ajax)</legend>
      <select ng-model="my_site" ng-options="site.id as site.name for site in siteList">
        <option value="">--Select--</option>
      </select>
      {{my_site}}
  </fieldset>
  
</div>

以前に多くの人が言ったように、私がこのようなデータを持っている場合：

countries : [
              {
                 "key": 1,
                 "name": "UAE"
             },
              {
                  "key": 2,
                  "name": "India"
              },
              {
                  "key": 3,
                  "name": "OMAN"
              }
         ]

私はそれを次のように使います：

<select
    ng-model="selectedCountry"
    ng-options="obj.name for obj  in countries">
</select>

コントローラで、最初の空のアイテムを取り除くために初期値を設定する必要があります：

 $scope.selectedCountry = $scope.countries[0];

 // You need to watch changes to get selected value
 $scope.$watchCollection(function() {
   return $scope.selectedCountry
 }, function(newVal, oldVal) {
     if (newVal === oldVal) {
       console.log("nothing has changed " + $scope.selectedCountry)
     } 
     else {
       console.log('new value ' + $scope.selectedCountry)
     }
 }, true)

これが、レガシーアプリケーションでこの問題を解決する方法です。

HTML：

ng-options="kitType.name for kitType in vm.kitTypes track by kitType.id" ng-model="vm.itemTypeId"

JavaScriptの場合：

vm.kitTypes = [
    {"id": "1", "name": "Virtual"},
    {"id": "2", "name": "Physical"},
    {"id": "3", "name": "Hybrid"}
];

...

vm.itemTypeId = vm.kitTypes.filter(function(value, index, array){
    return value.id === (vm.itemTypeId || 1);
})[0];

HTMLにオプションの値が正しく表示されます。

ngOptionsディレクティブ：

$scope.items = [{name: 'a', age: 20},{ name: 'b', age: 30},{ name: 'c', age: 40}];

• ケース1）配列内の値のラベル：

  <div>
      <p>selected item is : {{selectedItem}}</p>
      <p> age of selected item is : {{selectedItem.age}} </p>
      <select ng-model="selectedItem" ng-options="item.name for item in items">
      </select>
  </div>

出力の説明（最初の項目が選択されていると想定）：

SelectedItem = {名：「」、年齢：20} // [デフォルトで選択された項目は、値に等しいアイテム】

selectedItem.age = 20

• ケース2）配列の値のラベルとして選択：

  <div>
      <p>selected item is : {{selectedItem}}</p>
      <select ng-model="selectedItem" ng-options="item.age as item.name for item in items">
      </select>
  </div>

出力の説明（最初の項目が選択されていると想定）： selectedItem = 20 // [選択パー​​ツはitem.ageです ]