web-dev-qa-db-ja.com

配列付きAngularjs ngオプション

私は、オプションAM、PM、angularjsを使用してHTML選択を追加します。必要なのは、キーとオプションの値が同じであることです。

<option value="AM">AM</option>
<option value="PM">PM</option>

私のhtmlはこのようになります

<select ng-model="ampm" ng-options="k as v for (k , v) in ampms"></select>

そして私のコントローラーは次のようになります

  $scope.ampm = (new Date().getHours()) >= 12 ? 'PM' : 'AM';
  $scope.ampms ={"AM":"AM","PM":"PM"};

そして、すべてがうまく機能しています。

私の質問は、なぜ私が配列を使用したときに同じことをすることができないのですか（私はng-optionsのすべてのオプションを試しました）これと同じです

$scope.ampms =["AM","PM"];

何をしても、いつもこれを手に入れます

<option value="0">AM</option>
<option value="1">PM</option>

上記のような配列をオプションで使用すると、キーと値が同じになります。

angularjshtml-select
20
ibmkhd

これは、Angularのng-optionsのデフォルトの動作です。キー名を指定しない場合、angularは自動的にキーではなくインデックスを使用することを選択します。これを行うコードは / src /の行405にあります） AngularのGithubリポジトリのng/directives/select.js 。

「値の中の（インデックス、値）の値としての値」によって強制することもできません。

しかし、dnc253は私に彼の答えでパンチを打ちました（入力中に表示されました）...あなたはそれについて心配する必要はありません、Angularは自動的にすべてを行います。

10
Ben Lesh

AngularJSを使用すると、オプションの値について心配する必要はありません。 ng-optionsで見たすべての選択の値は0から何でもです。 2つのオプションのあるドロップダウンを探しているだけの場合は、次のように簡単です。

<select ng-model="ampm" ng-options="currOption for currOption in ['AM', 'PM']"></select>

参照 http://jsfiddle.net/EyBVN/1/

26
dnc253

選択のオプションの値に特定のデータを配置する方法を見つけました。 selectタグ内のoptionタグにng-repeat属性を追加する必要があります：

<select id="{{question.id}}" name="{{question.id}}" 
    class="{{question.inputclass}}" ng-required="question.required" 
    title="{{question.title}}">
  <option value=""></option>
  <optgroup ng-repeat="group in question.data" label="{{group.group}}">
    <option ng-repeat="item in group.data" value="{{item.value}}" 
        ng-selected="{{item.value == question.defaultValue}}">
          {{item.description}}
    </option>
  </optgroup>
</select>

おまけとして、私はすべての人のための例として役立つように、オプショングループタグを残しました。

question.dataJSONは：

[
  {"group":"Canada","data":[{"value":"Ontario","description":"Toronto"},
                            {"value":"Quebec","description":"Quebec City"},
                            {"value":"Manitoba","description":"Winnipeg"}
                           ]
  },
  {"group":"Mexico","data":[{"value":"Jalisco","description":"Guadalajara"},
                            {"value":"Nayarit","description":"Tepic"}
                           ]
  },
  {"group":"United States of America","data":[
                            {"value":"Alabama","description":"Montgomery"},
                            {"value":"Georgia","description":"Atlanta"},
                            {"value":"Mississippi","description":"Jackson"},
                            {"value":"Louisiana","description":"Baton Rouge"},
                            {"value":"Texas","description":"Ausint"}
                           ]
  }
]
2
Adam Zuckerman