AngularJS ng-options value設定解説

AngularJSのng-optionsにおけるvalueプロパティの設定について

日本語での解説

AngularJSのng-optionsディレクティブは、HTMLの<select>要素にオプションを動的に生成するために使用されます。その中で、valueプロパティは、選択されたオプションの値を指定します。

基本的な構文

<select ng-model="selectedOption" ng-options="item.value as item.label for item in items">
  <option value="">-- Please select --</option>
</select>

valueプロパティの役割

• フォームの送信
  フォームを送信すると、selectedOption 変数の値がサーバーに送信されます。
• モデルの更新
  ユーザがオプションを選択すると、selectedOption 変数の値が自動的に更新されます。
• 選択されたオプションの値
  選択されたオプションの値をAngularJSのスコープ変数 (selectedOption) にバインドします。

1. オブジェクトのキー
   item.value の部分は、各オプションの値を表すオブジェクトのキーを指定します。
2. 表示ラベル
   item.label の部分は、各オプションに表示されるラベルを指定します。
3. アイテムの配列
   items は、オプションのデータを含むオブジェクトの配列です。

例

$scope.items = [
  { id: 1, name: 'Option A' },
  { id: 2, name: 'Option B' },
  { id: 3, name: 'Option C' }
];

この場合、value プロパティは item.id と設定され、選択されたオプションのIDが selectedOption 変数にバインドされます。

<select ng-model="selectedFruit" ng-options="fruit.id as fruit.name for fruit in fruits">
  <option value="">-- Please select --</option>
</select>

$scope.fruits = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Orange' },
  { id: 3, name: 'Banana' }
];

• ng-options ディレクティブでは、fruit.id をvalue プロパティとして設定し、選択されたフルーツのIDを selectedFruit 変数にバインドします。
• この例では、fruits 配列にフルーツのオブジェクトが含まれています。

例2: カスタムラベルと値

<select ng-model="selectedUser" ng-options="user.id as user.username + ' (' + user.email + ')' for user in users">
  <option value="">-- Please select --</option>
</select>

$scope.users = [
  { id: 1, username: 'john', email: '[email protected]' },
  { id: 2, username: 'jane', email: '[email protected]' },
  { id: 3, username: 'mike', email: '[email protected]' }
];

• 選択されたユーザのIDは selectedUser 変数にバインドされます。
• この例では、カスタムのラベルとして user.username + ' (' + user.email + ')' を使用しています。

例3: グループ化

<select ng-model="selectedColor" ng-options="color.name for color in colors | orderBy:'group'">
  <option value="">-- Please select --</option>
</select>

$scope.colors = [
  { name: 'Red', group: 'Primary' },
  { name: 'Blue', group: 'Primary' },
  { name: 'Yellow', group: 'Primary' },
  { name: 'Green', group: 'Secondary' },
  { name: 'Orange', group: 'Secondary' },
  { name: 'Purple', group: 'Secondary' }
];

• value プロパティは color.name と設定されています。
• この例では、orderBy フィルターを使用して色をグループ別にソートしています。

カスタムテンプレート

• テンプレート内で、$select変数を使用して選択されたオプションにアクセスし、必要な値を抽出できます。
• 複雑なオプションの構造や表示フォーマットが必要な場合、カスタムテンプレートを使用できます。

<select ng-model="selectedOption">
  <option ng-repeat="item in items" value="{{ item.id }}">
    <span ng-if="$select.selected">{{ item.label }}</span>
  </option>
</select>

ディレクティブ

• ディレクティブ内で、選択されたオプションの値を処理し、必要なロジックを実行できます。
• 独自のディレクティブを作成して、ng-optionsの機能を拡張することができます。

angular.module('myApp', [])
  .directive('mySelect', function() {
    return {
      restrict: 'E',
      template: '<select ng-model="selectedOption"></select>',
      link: function(scope, element, attrs) {
        // 選択されたオプションの処理
        scope.$watch('selectedOption', function(newValue, oldValue) {
          // ここにカスタムロジックを追加
        });
      }
    };
  });

ng-repeatとng-selected

• シンプルなケースでは、ng-repeatとng-selectedを使用してオプションを生成し、選択状態を管理することもできます。

<select ng-model="selectedOption">
  <option ng-repeat="item in items" value="{{ item.id }}" ng-selected="item.id === selectedOption">{{ item.label }}</option>
</select>

ng-option

• ng-optionは、ng-optionsの簡略化されたバージョンです。基本的なケースでは、ng-optionを使用してvalueプロパティを設定できます。

<select ng-model="selectedOption">
  <option ng-option="item.label for item in items"></option>
</select>