select

https://docs.angularjs.org/api/ng/directive/select

Augularのdata-bindで紐付けされたHMTLのSELECT要素です。

使用方法
ngOptions

使用方法

このディレクティブは、カスタム要素として使用することができますが、IEの制限に注意してください。

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

引数	説明
ngModel	型：`string` data-bindへAngular式を割り当てます。
name (optional)	型：`string` フォーム下で制御されるプロパティ名です。
required (optional)	型：`string` 値が入力された際に、検証対象となります。
ngRequired (optional)	型：`string` trueの場合、required属性を追加し、その検証を要素に対して強制します。 data-bindをrequired属性に対して行いたい場合、requiredの代わりにngRequiredを使用してください。
ngOptions (optional)	下記の形式からいずれかを適用します。適用例: `<!-- "ラベル for 値 in 配列" --> ng-options="c.name for c in colors"` 配列 "ラベル for 値 in 配列" "選択値 as ラベル for 値 in 配列" "ラベル group by グループ for 値 in 配列" "選択値 as ラベル group by グループ for 値 in 配列 track by 追跡式" オブジェクト "ラベル for (キー , 値) in オブジェクト" "選択値 as ラベル for (キー , 値) in オブジェクト" "ラベル group by グループ for (キー, 値) in オブジェクト" "選択値 as ラベル group by グループ for (キー, 値) in オブジェクト" 各用語の説明: 配列 / オブジェクト: 繰り返し処理で評価したい式を指定します。値: 繰り返し処理中に配列またはオブジェクトのプロパティの値として、各項目で参照するローカル変数を指定します。キー: 繰り返し処理中に、オブジェクトのプロパティ名として参照されるローカル変数を指定します。ラベル: <option>要素のラベルとする式を指定します。この式は、最も相応しいと思われる変数値を参照します。(例: value.propertyName) 選択値: この式が、親の<select>要素のモデルに紐付けられます。指定されない場合、選択値はデフォルトで「値」になります。グループ: この式の結果が、<optgroup>DOM要素を使用したグループオプションに使用されます。追跡式: オブジェクトの配列を扱う場合に使用されます。この式の結果が、配列内のオブジェクトの識別に使用されます。追跡式は、最も相応しいと思われる変数値を参照します。(例: value.propertyName)

ngOptions

ngOptions属性は、配列またはngOptions式の評価によって取得するオブジェクトによって動的に<option>要素を<select>要素内へ作成するために使用されます。

<select>メニューで選択されている項目がある時、選択されているオプションに該当する、配列要素の値またはオブジェクトのプロパティは、親のselect要素のngModelディレクティブに識別されたモデルに紐付けられます。

任意で、値に空文字列がセットされた単体でハードコードされた<option>要素を、 <select>要素内に追加することが可能です。この要素はnullまたは"not selected"を表すオプションとなります。下記の例で確認してください。

注意:ngOptionsは、selectモデルを文字列ではない値に紐付けたい場合に、 ngRepeatの代わりに使用すべきイテレータ機能を<option>要素に提供します。なぜなら、現在option要素は、文字列の値しか紐付けることが出来ないからです。

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div ng-controller="MyCntrl">
      <ul>
        <li ng-repeat="color in colors">
          Name: <input ng-model="color.name">
          [<a href ng-click="colors.splice($index, 1)">X</a>]
        </li>
        <li>
          [<a href ng-click="colors.push({})">add</a>]
        </li>
      </ul>
      <hr/>
      Color (null not allowed):
      <select ng-model="color" ng-options="c.name for c in colors"></select><br>

      Color (null allowed):
      <span  class="nullable">
        <select ng-model="color" ng-options="c.name for c in colors">
          <option value="">-- chose color --</option>
        </select>
      </span><br/>

      Color grouped by shade:
      <select ng-model="color" ng-options="c.name group by c.shade for c in colors">
      </select><br/>


      Select <a href ng-click="color={name:'not in list'}">bogus</a>.<br>
      <hr/>
      Currently selected: {{ {selected_color:color}  }}
      <div style="border:solid 1px black; height:20px"
           ng-style="{'background-color':color.name}">
      </div>
    </div>
  </body>
</html>

function MyCntrl($scope) {
  $scope.colors = [
    {name:'black', shade:'dark'},
    {name:'white', shade:'light'},
    {name:'red', shade:'dark'},
    {name:'blue', shade:'dark'},
    {name:'yellow', shade:'light'}
  ];
  $scope.color = $scope.colors[2]; // red
}

it('should check ng-options', function() {
  expect(binding('{selected_color:color}')).toMatch('red');
  select('color').option('0');
  expect(binding('{selected_color:color}')).toMatch('black');
  using('.nullable').select('color').option('');
  expect(binding('{selected_color:color}')).toMatch('null');
});

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
<script>function MyCntrl($scope) {
  $scope.colors = [
    {name:'black', shade:'dark'},
    {name:'white', shade:'light'},
    {name:'red', shade:'dark'},
    {name:'blue', shade:'dark'},
    {name:'yellow', shade:'light'}
  ];
  $scope.color = $scope.colors[2]; // red
}
</script>
  </head>
  <body>
    <div ng-controller="MyCntrl">
      <ul>
        <li ng-repeat="color in colors">
          Name: <input ng-model="color.name">
          [<a href ng-click="colors.splice($index, 1)">X</a>]
        </li>
        <li>
          [<a href ng-click="colors.push({})">add</a>]
        </li>
      </ul>
      <hr/>
      Color (null not allowed):
      <select ng-model="color" ng-options="c.name for c in colors"></select><br>

      Color (null allowed):
      <span  class="nullable">
        <select ng-model="color" ng-options="c.name for c in colors">
          <option value="">-- chose color --</option>
        </select>
      </span><br/>

      Color grouped by shade:
      <select ng-model="color" ng-options="c.name group by c.shade for c in colors">
      </select><br/>


      Select <a href ng-click="color={name:'not in list'}">bogus</a>.<br>
      <hr/>
      Currently selected: {{ {selected_color:color}  }}
      <div style="border:solid 1px black; height:20px"
           ng-style="{'background-color':color.name}">
      </div>
    </div>
  </body>
</html>

このページは、ページトップのリンク先のAngularJS公式ドキュメント内のページを翻訳した内容を基に構成されています。下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

AngularJSの更新頻度が高いため、元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
"訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。