AngularJSボックスを選択します

AngularJSでは、配列、またはオブジェクト内の項目に基づいて、ドロップダウンリストを作成することができます。

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

ドロップダウンリストを作成したい場合は、オブジェクトまたはAngularJSの配列に基づいて、あなたが使用する必要がありng-optionディレクティブを：

例

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
});

</script>

»それを自分で試してみてください

NG-リピート対NG-オプション

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

例

»それを自分で試してみてください

のでng-repeatディレクティブは、配列内の各アイテムのためのHTMLコードのブロックを繰り返し、ドロップダウンリストのオプションを作成するために使用することができますが、 ng-optionsディレクティブは、特にオプションを持つドロップダウンリストを埋めるために作られた、と持っています少なくとも一つの重要な利点：

作られたドロップダウンng-optionsから作られたドロップダウンしながら、選択された値がオブジェクトにすることができますng-repeat 、文字列にする必要があります。

私は何を使用していますか？

あなたがオブジェクトの配列があるとします。

$scope.cars = [
    {model : "Ford Mustang", color : "red"},
    {model : "Fiat 500", color : "white"},
    {model : "Volvo XC90", color : "black"}
];

ng-repeatディレクティブは、選択された値が文字列である必要があり、それのような制限があります。

例

使用ng-repeat ：

<select ng-model="selectedCar">
<option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>

<h1>You selected: {{selectedCar}}</h1>

»それを自分で試してみてください

使用する場合はng-optionsディレクティブを、選択された値は、オブジェクトを指定できます。

例

使用ng-options ：

<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>

<h1>You selected: {{selectedCar.model}}</h1>
<p>It's color is: {{selectedCar.color}}</p>

»それを自分で試してみてください

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

我々は、使用するng-optionsこのチュートリアルのディレクティブを。

対象となるデータソース

前の例では、データソースが配列だったが、我々はまた、オブジェクトを使用することができます。

あなたは、キーと値のペアを持つオブジェクトがあるとします。

$scope.cars = {
    car01 : "Ford",
    car02 : "Fiat",
    car03 : "Volvo"
};

中での発現ng-options属性は、オブジェクトのために若干異なります。

例

データソースとしてオブジェクトを使用して、 xキーを表し、 y値を表します。

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

<h1>You selected: {{selectedCar}}</h1>

»それを自分で試してみてください

選択された値が常にKEY- 値のペアの値になります。

KEY- 値のペアの値は、オブジェクトを指定できます。

例

選択された値は、まだこの時期だけは、それがオブジェクトである、KEY- 値のペアの値になります。

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

»それを自分で試してみてください

ドロップダウンリストのオプションは、キー -値ペアのキーである必要はありません、それはまた、値、または値オブジェクトのプロパティを指定できます。