AngularJS Select(选择框)

AngularJS は配列またはオブジェクトを使用してドロップダウンリストのオプションを作成できます。

ng-optionsを使用して選択ボックスを作成する

AngularJS では、次を使用できます：ng-optionディレクティブを使用してドロップダウンリストを作成し、リスト項目はオブジェクトと配列をループして出力します。以下の例のとおりです：

实例

<div ng-app="myApp" ng-controller="myCtrl"> <select ng-init="selectedName = names[0]" 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 = ["Google", "サンプル", "Taobao"]; }); </script>

尝试一下 »

ng-initでデフォルトの選択値を設定する。

ng-options と ng-repeat

使用することもできますng-repeatディレクティブを使用してドロップダウンリストを作成します：

实例

<select>
<option ng-repeat="x in names">{{x}}</option>
</select>

尝试一下 »

ng-repeatこのディレクティブは配列を使用して HTML コードをループ処理し、ドロップダウンリストを作成しますが、ng-optionsこのディレクティブはドロップダウンリストの作成に適しており、次の利点があります：

使用ng-optionsのオプションはオブジェクトです。ng-repeatは文字列です。

どちらの方が良いでしょうか?

次のオブジェクトを使用すると仮定します：

$scope.sites = [
    {site : "Google", url : "http://www.google.com"},
    {site : "サンプル", url : "http://www.example.com"},
    {site : "Taobao", url : "http://www.taobao.com"}
];

ng-repeat制限があり、選択される値は文字列です：

实例

使用ng-repeat:

<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>

<h1>あなたが選択したのは:{{selectedSite}}</h1>

尝试一下 »

使用ng-optionsディレクティブで、選択された値はオブジェクトです：

实例

使用ng-options:

<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>

<h1>あなたが選択したのは:{{selectedSite.site}}</h1>
<p>URL：{{selectedSite.url}}</p>

尝试一下 »

選択値がオブジェクトの場合、より多くの情報を取得でき、アプリケーションもより柔軟になります。

データソースはオブジェクトです

前の例では配列をデータソースとして使用しましたが、以下ではデータオブジェクトをデータソースとして使用します。

$scope.sites = {
    site01 : "Google",
    site02 : "サンプル",
    site03 : "Taobao"
};

ng-optionsオブジェクトを使用すると大きな違いがあります。次のようになります：

实例

オブジェクトをデータソースとして使用する場合、xキー(key)として、y値(value):

<select ng-model="selectedSite" ng-options="x for (x, y) in sites">
</select>

<h1>選択した値は:{{selectedSite}}</h1>

尝试一下 »

選択した値はkey-value対の中のvalue。

valuekey- においてvalueオブジェクトの中でもオブジェクトにすることができます：

实例

選択された値はkey-value正しいvalue中では、このときそれはオブジェクトです：

$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};

尝试一下 »

ドロップダウンメニューでは使用しなくてもよいkey-valueペアの中にありますkey、オブジェクトのプロパティを直接使用します：

实例

<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>

尝试一下 »
其他扩展