ng-options属性の構文いろいろ。

Level 1｜｜2016/07/08

前回、「ng-options属性」で構文を学びましたが、この他にもいろんな書き方があるので、併せて勉強しときます。

前回のng-options属性の説明を見る

サンプルコード

angularJSのng-options属性では、さまざまな構文が用意されています。
まずは、どんなものがあるのかサンプルで確かめます。
サンプルは、JS側で設定した項目がセレクトボックスに表示され、ng-options属性の構文を使って、いろんな取り出し方をしています。今回は4パターンだけの紹介ですが、この他にもあるので、詳細はリファレンスなどをご覧ください。

HTMLファイル

<form>
    <h1>タイトルを取り出し、選択後にすべての中身を出力</h1>
    <strong>1)構文パターン | ラベルテキスト for 仮変数 in 配列</strong><br />
    <label for="seo01">SeoFactors：</label>
    <select id="seo01" name="seo01" ng-model="data.seo" ng-options="seo.title for seo in seofactors">
      <option value="">以下から選択してください。</option>
    </select>
    <p>選択した値の中身------------<br />
    catgory= {{data.seo.catgory}}<br />
    element= {{data.seo.element}}<br />
    score= {{data.seo.score}}<br />
    title= {{data.seo.title}}<br />
    detail= {{data.seo.detail}}<br />
    deleted= {{data.seo.deleted}}<br />------------</p>

    <h1>選択肢を特定の要素でグループ化</h1>
    <strong>2)構文パターン | ラベルテキスト group by グループ化の項目 for 仮変数 in 配列</strong><br />
    <label for="seo02">SeoFactors：</label>
    <select id="seo02" name="seo02" ng-model="data.seo02" ng-options="seo02.title group by seo02.score for seo02 in seofactors">
      <option value="">以下から選択してください。</option>
    </select>

    <h1>選択した項目の中から、特定の値を出力</h1>
    <strong>3)構文パターン | 特定の値 as ラベルテキスト for 仮変数 in 配列</strong><br />
    <label for="seo03">SeoFactors：</label>
    <select id="seo03" name="seo03" ng-model="data.seo03" ng-options="seo03.element as seo03.title for seo03 in seofactors">
      <option value="">以下から選択してください。</option>
    </select>
    <p>element={{data.seo03}}</p>

    <h1>選択できない項目を作る</h1>
    <strong>4)構文パターン | ラベルテキスト disable when for 仮変数 in 配列</strong><br />
    <label for="seo04">SeoFactors：</label>
    <select id="seo04" name="seo04" ng-model="data.seo04" ng-options="seo04.title disable when seo04.deleted for seo04 in seofactors">
      <option value="">以下から選択してください。</option>
    </select>

</form>

            

JSファイル

angular.module('myApp', [])
  .controller('theController',['$scope', function ($scope) {
      $scope.seofactors = [
      {
          catgory: 'Content',
          element: 'Cq',
          score: '+3',
          title: '品質',
          detail: 'そのページは実質的な高いコンテンツを持ちしっかりと書かれているか',
          deleted: false
      },
   --- 中略 ---
      {
          catgory: 'Html',
          element: 'Hd',
          score: '+2',
          title: 'ディスクリプション',
          detail: 'メタのディスクリプションは、ページの要約になっているか',
          deleted: true
      }
     ];
  }]);            

1) ラベルテキスト for 仮変数 in 配列

<select ng-model="data.seo" ng-options="seo.title for seo in seofactors">
            

タイトル（任意の値）を取り出し、選択後にすべての中身を出力する構文です。
JSで指定した「seofactors」を順に、仮変数「seo」で取り出し、ラベルテキスト「seo.title」で任意の値を出力（出力自体はオプションタグ）します。
今回はJSで指定した「seofactors」の中から、「title」を取り出しています。
すべての中身を出力する際は、Angular式{{data.seo.catgory}}と指定すると、カテゴリ名が取り出されます。

2）ラベルテキスト group by グループ化の項目 for 仮変数 in 配列

<select ng-model="data.seo02" ng-options="seo02.title group by seo02.score for seo02 in seofactors">
            

選択肢を特定の要素でグループ化する構文です。
JSで指定した「seofactors」を順に、仮変数「seo02」で取り出し、グループ化の項目「seo02.score」でグループ化し、ラベルテキスト「seo.title」を出力しています。
今回はJSで指定した「seofactors」の中から、「score」でグループ化しています。

3）特定の値 as ラベルテキスト for 仮変数 in 配列

<select ng-model="data.seo03" ng-options="seo03.element as seo03.title for seo03 in seofactors">
<p>element={{data.seo03}}</p>
            

選択した項目の中から、特定の値を出力する構文です。
JSで指定した「seofactors」を順に、仮変数「seo03」で取り出し、ラベルテキスト「seo.title」と関連している特定の値「seo03.element」をAngular式の{{data.seo03}}で出力しています。
構文の1番でも特定の値を取り出していますが、こっちのほうがダラダラ記述せずに済みますね。

4）ラベルテキスト disable when 指定した値 for 仮変数 in 配列

<select ng-model="data.seo04" ng-options="seo04.title disable when seo04.deleted for seo04 in seofactors">
            

選択できない項目を作る構文です。
JSで指定した「seofactors」を順に、仮変数「seo03」で取り出し、指定した値「seo04.deleted」がtureの時にラベルテキスト「seo.title」を選択できないようにしています。
サンプルでは「deleted:ture」のものだけ、選択できないようになっています。「deleted:false」は偽なので、通常通り選択できます。

ng-options属性の構文は、上記の他にもありますので、リファレンスを参考にしてください。