angularjs select（select box）
AngularJSは、配列またはオブジェクトを使用して、ドロップダウンリストオプションを作成できます。
ng-optionsを使用して、選択ボックスを作成します
Angularjsでは、NG-Optionディレクティブを使用してドロップダウンリストを作成できます。リスト項目は、次の例に示すように、オブジェクトと配列を介して出力ループです。
例
<！doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> ng-model = "selectedName" ng-options = "x for x in names"> </select> </div> <script> var app = angular.module（ 'myapp'、[]）; app.controller（ 'myctrl'、function（$ scope）{$ scope.names = ["runoob"; ng-optionsディレクティブの使用を実証します。 </p> </body> </html>実行結果：
この例は、NG-Optionsディレクティブの使用を示しています。
ng-optionsとng-repeat
また、NG-Reepeatディレクティブを使用して、ドロップダウンリストを作成することもできます。
例
<！doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </scrip> </head> ng-controller = "myctrl"> <select> <option ng-repeat = "in names"> {{x}} </option> </select> </div> <script> var app = angular.module（ 'myApp'、[]）; app.controller（ 'myctrl'、uncope（$ scope）{$ scope "" "" "" "" "" "" "" "Google" "" "Google」 「taobao」];}）; </script> <p>この例は、ng-repeatディレクティブを使用してドロップダウンリストを作成することを示しています。 </p> </body> </html>実行結果：
この例は、NG-Reepeatディレクティブを使用してドロップダウンリストを作成することを示しています。
NG-Reepeatディレクティブは、配列を使用してHTMLコードをループしてドロップダウンリストを作成しますが、NG-Optionsディレクティブはドロップダウンリストの作成に適しています。次の利点があります。
ng-optionsオプションを使用するオブジェクト、ng-repeatは文字列です。
どちらが良いはずですか？
次のオブジェクトを使用するとします。
$ scope.sites = [{site： "google"、url： "http://www.google.com"}、{site： "runoob"、url： "http://www.runoob.com"}、{site： "taobao"、 "http ://ww.taoba.com"}];Ng-Repeatには制限があり、選択された値は文字列です。
例
ng-repeatを使用してください：
<！doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </scrip> </head> ng-controller = "myctrl"> <p> Webサイトを選択：</p> <select ng-model = "selectedSite"> <option ng-repeat = "x in sites" value = "{{x.url}}"> {{x.site}}}} </option> </selece> <h1> {{selectedSite}} </h1> </div> <script> var app = angular.module（ 'myapp'、[]）; app.controller（ 'myctrl'、function（$ scope）{$ scope.sites = [{site： "google"、url： "http：" "http://www.runoob.com"}、{site： "taobao"、url： "http://www.taobao.com"}];} </p> </body> </html>ランニング効果：
Webサイトを選択してください：
あなたの選択は次のとおりです：http：//www.google.com
この例は、NG-Reepeatディレクティブを使用してドロップダウンリストを作成し、選択した値が文字列であることを示しています。
ng-optionsディレクティブを使用すると、選択された値はオブジェクトです。
例
ng-optionsを使用してください：
<！doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </scrip> </head> ng-controller = "myctrl"> <p> Webサイトの選択：</p> <select ng-model = "selectedsite" ng-options = "x.site in sites"> </selection> <h1> you chosen：{{selectedsite.site}}}} </h1> <p> {{selectedSite.url}} </p> </div> <script> var app = angular.module（ 'myapp'、[]）; app.controller（ 'myctrl'、function（$ scope）{$ scope.sites = [{site： "google"、url： "http:///ww.goo. ： "http://www.runoob.com"}、{site： "taobao"、url： "http://www.taobao.com"}];} </p> </body> </html>ランニング効果：
Webサイトを選択してください：
あなたが選んだ：Google
URLは：http：//www.google.comです
この例は、NG-Optionsディレクティブを使用してドロップダウンリストを作成し、選択した値がオブジェクトであることを示しています。
値をオブジェクトとして選択するとき、より多くの情報を取得することができ、アプリケーションはより柔軟になります。
オブジェクトとしてのデータソース
前の例では、配列をデータソースとして使用し、以下でデータオブジェクトをデータソースとして使用しました。
$ scope.sites = {site01： "google"、site02： "runoob"、site03： "taobao"};ng-optionsは、次のように非常に異なるオブジェクトを使用します。
例
オブジェクトをデータソースとして使用し、xはキー、yは値です。
<！doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </scrip> </head> ng-controller = "myctrl"> <p>選択したWebサイトは</p> <select ng-model = "selectedsite" ng-options = "x for（x、y）in sites"> </select> <h1>あなたが選択した値は{{selectedsite}}}} </h1 < </p> <script> var app = angular.module（ 'myApp'、[]）; app.controller（ 'myctrl'、function（$ scope）{$ scope.sites = {site01： "google"、site02： "runoob"、site03： "taobao"};}ランニング効果：
選択したWebサイトは次のとおりです。
選択した値は：Googleです
この例は、ドロップダウンリストの作成としてオブジェクトを使用することを示しています。
選択した値は、キー値ペアの値です。
値は、キー価値ペアのオブジェクトでもあります。
例
選択された値は、キー値ペアの値にあります。これはオブジェクトです。
<！doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </scrip> </head> ng-controller = "myctrl"> <p> carを選択：</p> <select ng-model = "selectedcar" ng-options = "x for（x、y）in cars"> </select> <h1> {{selectedcar.brand}}}} </h1 <h2>モデル：{{selectedcar.brand}} {{selectedCar.Model}} </h2> <h3>色：{{selectedCar.Color}} </h3> <p>選択した値はオブジェクトであることに注意してください。 </p> </div> <script> var app = angular.module（ 'myApp'、[]）; app.controller（ 'myctrl'、function（$ scope）{$ scope.cars = {car01：{brand： "ford"、モデル： "マスタング"、 "color：" red "}、car02： car03：{brand： "volvo"、model： "xc90"、color： "black"}}）; </script> </body> </html>実行結果：
車を選択してください
あなたが選ぶ：fiat
モデル：500
色：白
注：選択された値はオブジェクトです。
また、キー値ペアを使用する代わりに、キー値ペアのキーを使用して、オブジェクトのプロパティを直接使用することもできます。
例：
<！doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </scrip> </head> ng-controller = "myctrl"> <p>車を選択：</p> <select ng-model = "selectedcar" ng-options = "y.brand for（x、y）for（x、y）in cars"> </select> <p> {{selectedCar.Model}} </p> <p>色は次のとおりです。{{selectedCar.Color}} </p> <p>ドロップダウンリストのオプションは、オブジェクトの属性でもあります。 </p> </div> <script> var app = angular.module（ 'myApp'、[]）; app.controller（ 'myctrl'、function（$ scope）{$ scope.cars = {car01：{brand： "ford"、モデル： "マスタング"、 "color：" red "}、car02： car03：{brand： "volvo"、model： "xc90"、color： "black"}}）; </script> </body> </html>実行結果：
車を選択してください：
あなたの選択は：フォードです
モデル：マスタング
色は：赤です
ドロップダウンリストのオプションは、オブジェクトの属性でもあります。
上記は、Angularjs Select情報の編集であり、後で追加し続けます。困っている友達を助けることができることを願っています。