AngularJS の ng-options

Rana Hasnain Khan 2024年2月15日

Angular Angular ng-options

このチュートリアルでは、ng-options と、それを使用して AngularJS を使用した select でオプションを表示する方法について説明します。

AngularJS で `ng-options` を使用する

ng-options は、オプション付きの HTML 要素を作成してモデルプロパティにバインドするために使用されます。ng-options を使用して、選択リストのオプションを指定します。

ng-options は、ドロップダウンリストの項目にデータを入力するように特別に設計されています。ng-options を使用してオプションを設定するドロップダウンを作成する例を見ていきます。

まず、script タグを使用して AngularJS ライブラリと app.js ファイルを追加します。

# AngularJS
<head>
    <script src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
    <script src="app.js"></script>
  </head>

ng-app を使用して AngularJS アプリケーションを定義し、ng-controller を使用してコントローラーを定義します。

# AngularJS
<body ng-app="myApp">
    <div ng-controller="myController"></div>
  </body>

次に、app.js でモジュールを作成します。

# AngularJS
var app = angular.module('myApp', []);

配列 selectedItem を定義するコントローラーを作成し、app.js のオプション用に割り当てられた値を配列に追加します。

# AngularJS
app.controller('myController', function($scope) {

  $scope.lists = [];
  $scope.selectedItem = { name: 'second', id: 5 };
  $scope.lists = [{name: 'first', id: 3 },{ name: 'second', id: 5 },{ name: 'third', id: 7 }];

});

最後に、アプリケーションのフロントエンドを作成します。

# AngularJS
    <p>selected item is : {{selectedItem}}</p>
    <p> name of selected item is : {{selectedItem.name}} </p>
    <select ng-model="selectedItem" ng-options="list.name for list in lists track by list.id"></select>

出力：

AngularJS の ng-options の例

ng-options を使用する上記の例では、select でオプションのリストを表示するのは非常に簡単です。ユーザーがアイテムを選択したときにアイテムを選択するために、追加のコード行を記述する必要はありません。

著者： Rana Hasnain Khan

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

AngularJS で ng-options を使用する

AngularJS で `ng-options` を使用する