Latest web development tutorials

AngularJSを選択(チェックボックス)

AngularJSは、配列やオブジェクトを使用するためのオプションのドロップダウンリストを作成することができます。


NG-オプションを使用して、選択ボックスを作成します。

AngularJSでは、例として以下の出力、のオブジェクトと配列周期のドロップダウンリスト、リストアイテムを作成するために、NG-optionコマンドを使用することができます。

<DIV ngのアプリ= "て、myApp " NG-コントローラ= "myCtrl">

<選択NG-モデル= "selectedName 「NG-オプション="名前にX用のx ">
</選択>

</ DIV>

<スクリプト>
VARアプリ= angular.module( 'て、myApp' 、[]);
app.controller( 'myCtrl'、関数( $スコープ){
$ scope.names = [ "グーグル"、 "w3big"、 "淘宝網"];
});
</スクリプト>

»をお試しください

NG-オプションとngのリピート

また、ドロップダウンリストを作成するにはNG・リピートディレクティブを使用することができます。

<選択>
<オプションNG・リピート= "X名に"> {{X}} </オプション>
</選択>

»をお試しください

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-モデル= "selectedSite ">
<オプションNG・リピート= "Xのサイトで「値=" {{x.url}} "> {{x.site}} </オプション>
</選択>

<H1>あなたの選択である:{{selectedSite}} </ H1>

»をお試しください

使用NG-optionsコマンドは、オブジェクトの値を選択します。

NG-オプションを使用します。

<選択NG-モデル= "selectedSite ="サイト内のxのx.site "" NG-オプション>
</選択>

<H1>あなたの選択である:{{selectedSite.site}} </ H1>
<P> URLは次のとおりです。{{selectedSite.url}} </ P>

»をお試しください

あなたは値がオブジェクトである選択した場合、我々はより多くの情報やアプリケーションをより柔軟に取得することができます。


データ・ソース・オブジェクト

前の例で、我々は、データソースとして配列を使用し、我々は、データソースとして、次のデータオブジェクトを有します。

$scope.sites = {
    site01 : "Google",
    site02 : "w3big",
    site03 : "Taobao"
};

次のようにオブジェクトを使用して、NG-オプションは 、非常に異なっています:

データソースとしてオブジェクトを使用して、xが鍵(キー)であり、yが値(値)です。

<選択NG-モデル= "selectedSite 「NG-オプション="サイト内の(x、y)のためのx ">
</選択>

<H1>あなたが選択した:{{selectedSite}} </ H1>

»をお試しください

あなたの選択は、KEY-値のペアのです。

KEY-値のペアの値は 、ターゲットすることができます:

それがオブジェクトであるということです値、KEY-値の値を選択します。

$ Scope.cars = {
car01:{ブランド:「フォード」 、モデル:「マスタング」、色: "赤"}、
car02:{ブランド:「フィアット」 、モデル: "500"、色:「白"}、
car03:{ブランド:「ボルボ」 、モデル:「XC90」、色: "黒"}
};

»をお試しください

キー のキー-値のペアを使用することはできません直接ドロップダウンメニュー内のオブジェクトのプロパティを使用します。

<選択ngのモデルは= "selectedCar 「NG-オプション="車(x、y)のためのy.brand ">
</選択>

»をお試しください