「AngularJS」ngOptionsディレクティブの使い方

2022年8月24日

環境
Angularjs 1.6.9

書式

<select
       ngModel="{string}"
       [name="{string}"]
       [required]
       [ngRequired="{string}"]
       [ngOptions="{comprehension_expression}"]>
</select>

ngModel: data-bindへAngular式を割り当てます。
ngOptions
ng-options="ラベル for 値 in 配列名"
ラベル：　<option>要素のラベルとする式を指定します。
値：繰り返し処理中に配列またはオブジェクトのプロパティの値として、各項目で参照するローカル変数を指定します。
ngOptions属性は、配列またはngOptions式の評価によって取得するオブジェクトによって動的に<option>要素を<select>要素内へ作成するために使用されます。

使用例

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
 <div ng-app="myApp" ng-controller="cityCtrl">
   都市:<select ng-model="selectedName" ng-options="cs for cs in citys">
 </select>
</div>
<script>
var app = angular.module('myApp', []);
  app.controller('cityCtrl', function($scope) {
    $scope.citys = ["東京", "大阪", "福岡"];
});
</script>

<p>ng-options ディレクティブを使用してドロップダウン リストに入力する方法を表示しています。</p>

</body>
</html>

結果
セレクトボックスに「東京」、「大阪」、「福岡」選択項目が表示されます。

AngularJS

Posted by arkgame

関連記事: