AngularJSを選択(チェックボックス)
AngularJSは、配列やオブジェクトを使用するためのオプションのドロップダウンリストを作成することができます。
NG-オプションを使用して、選択ボックスを作成します。
AngularJSでは、例として以下の出力、のオブジェクトと配列周期のドロップダウンリスト、リストアイテムを作成するために、NG-optionコマンドを使用することができます。
例
<選択NG-モデル= "selectedName 「NG-オプション="名前にX用のx ">
</選択>
</ DIV>
<スクリプト>
app.controller( 'myCtrl'、関数( $スコープ){
$ scope.names = [ "グーグル"、 "w3big"、 "淘宝網"];
});
»をお試しください
NG-オプションとngのリピート
また、ドロップダウンリストを作成するにはNG・リピートディレクティブを使用することができます。
ngのリピート命令は、ドロップダウンリストを作成するHTMLコードの配列をループしているが、NG-オプションはドロップダウンリストを作成するためのより適しコマンドは、以下の利点があります。
NG-オプションオプションを使用してオブジェクトは、ngのリピートは文字列です。
優れている使用する必要がありますか?
我々は次のオブジェクトを使用すると仮定します。
$scope.sites = [ {site : "Google", url : "http://www.google.com"}, {site : "w3big", url : "http://www.w3big.com"}, {site : "Taobao", url : "http://www.taobao.com"} ];
NG-repeatがその限界を持っている、選択された値は文字列です。
例
使用ngのリピート:
<オプションNG・リピート= "Xのサイトで「値=" {{x.url}} "> {{x.site}} </オプション>
</選択>
<H1>あなたの選択である:{{selectedSite}} </ H1>
»をお試しください
使用NG-optionsコマンドは、オブジェクトの値を選択します。
例
NG-オプションを使用します。
</選択>
<H1>あなたの選択である:{{selectedSite.site}} </ H1>
<P> URLは次のとおりです。{{selectedSite.url}} </ P>
»をお試しください
あなたは値がオブジェクトである選択した場合、我々はより多くの情報やアプリケーションをより柔軟に取得することができます。
データ・ソース・オブジェクト
前の例で、我々は、データソースとして配列を使用し、我々は、データソースとして、次のデータオブジェクトを有します。
$scope.sites = { site01 : "Google", site02 : "w3big", site03 : "Taobao" };
次のようにオブジェクトを使用して、NG-オプションは 、非常に異なっています:
例
データソースとしてオブジェクトを使用して、xが鍵(キー)であり、yが値(値)です。
</選択>
<H1>あなたが選択した値:{{selectedSite}} </ H1>
»をお試しください
あなたの選択は、KEY-値のペアの値です。
KEY-値のペアの値は 、ターゲットすることができます:
例
それがオブジェクトであるということです値、のKEY-値の値を選択します。
car01:{ブランド:「フォード」 、モデル:「マスタング」、色: "赤"}、
car02:{ブランド:「フィアット」 、モデル: "500"、色:「白"}、
car03:{ブランド:「ボルボ」 、モデル:「XC90」、色: "黒"}
};
»をお試しください
キー のキー-値のペアを使用することはできません、直接ドロップダウンメニュー内のオブジェクトのプロパティを使用します。