72

ソース JSON データは次のとおりです。

[
  {"name":"Alabama","code":"AL"},
  {"name":"Alaska","code":"AK"},
  {"name":"American Samoa","code":"AS"},
  ...
]

私は試します

ng-options="i.code as i.name for i in regions"

しかし、得ています：

<option value="?" selected="selected"></option>
<option value="0">Alabama</option>
<option value="1">Alaska</option>
<option value="2">American Samoa</option>

私が得ることを期待している間：

<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AS">American Samoa</option>

では、値属性を取得して「?」を取り除く方法 アイテム？

ちなみに、$scope.regions を AJAX リクエストの結果ではなく、静的な JSON に設定すると、空の項目が消えます。

4

8 に答える 8

75

最初に試したものは機能するはずですが、HTML は私たちが期待するものではありません。最初の「アイテムが選択されていない」場合を処理するオプションを追加しました。

<select ng-options="region.code as region.name for region in regions" ng-model="region">
   <option style="display:none" value="">select a region</option>
</select>
<br>selected: {{region}}

上記により、次の HTML が生成されます。

<select ng-options="..." ng-model="region" class="...">
   <option style="display:none" value class>select a region</option>
   <option value="0">Alabama</option>
   <option value="1">Alaska</option>
   <option value="2">American Samoa</option>
</select>

フィドル

Angular は値に整数を使用しますが、モデル (つまり、$scope.region) は必要に応じて AL、AK、または AS に設定されます。(数値は、リストからオプションが選択されたときに正しい配列エントリを検索するために Angular によって使用されます。)

これは、Angular がその "select" ディレクティブをどのように実装するかを最初に学ぶときに混乱するかもしれません。

于 2012-12-10T20:33:13.260 に答える
26

ng-repeat で自分でビルドしない限り、実際にはこれを行うことはできません。

<select ng-model="foo">
   <option ng-repeat="item in items" value="{{item.code}}">{{item.name}}</option>
</select>

しかし...おそらくそれだけの価値はありません。設計どおりに機能させたままにして、Angular に内部の仕組みを処理させることをお勧めします。Angular はこのようにインデックスを使用するため、実際にはオブジェクト全体を値として使用できます。したがって、ドロップ ダウン バインディングを使用して、単なる文字列ではなく値全体を選択できます。これは非常に優れています。

<select ng-model="foo" ng-options="item as item.name for item in items"></select>

{{foo | json}}
于 2012-12-10T15:36:17.307 に答える
22

track byこのオプションを使用すると、value属性が正しく書き込まれます。たとえば、次のようになります。

<div ng-init="a = [{label: 'one', value: 15}, {label: 'two', value: 20}]">
    <select ng-model="foo" ng-options="x for x in a track by x.value"/>
</div>

生成:

<select>
    <option value="" selected="selected"></option>
    <option value="15">one</option>
    <option value="20">two</option>
</select>
于 2014-07-30T14:25:59.937 に答える
7

ドロップダウンに指定されたモデルが存在しない場合、angular は空の options 要素を生成します。したがって、次のように選択時にモデルを明示的に指定する必要があります。

<select ng-model="regions[index]" ng-options="....">

以前に回答したので、以下を参照してください。

AngularJS の select に空のオプションが含まれるのはなぜですか? そしてこのフィドル

更新:代わりにこれを試してください:

<select ng-model="regions[index].code" ng-options="i.code as i.name for i in regions">
</select>

or

<select ng-model="regions[2]" ng-options="r.name for r in regions">
</select>

select には空の options 要素がないことに注意してください。

于 2012-12-10T15:36:33.420 に答える
5

モデルを次のように変更できます。

$scope.options = {
    "AL" : "Alabama",
    "AK" : "Alaska",
    "AS" : "American Samoa"
  };

次に使用します

<select ng-options="k as v for (k,v) in options"></select>
于 2012-12-10T15:38:56.150 に答える
4

選択の「値」を通常の HTML フォーム要素として意味のある方法で実際に使用することは不可能であり、ng-options を使用して承認された方法で Angular に接続することもできません。妥協案として、次のように、select の横に非表示の入力を配置し、select と同じモデルを追跡する必要がありました (簡潔にするために、すべて実際のプロダクション コードから非常に単純化されています)。

HTML:

<select ng-model="profile" ng-options="o.id as o.name for o in profiles" name="something_i_dont_care_about">
</select>
<input name="profile_id" type="text" style="margin-left:-10000px;" ng-model="profile"/>

Javascript:

App.controller('ConnectCtrl',function ConnectCtrl($scope) {
$scope.profiles = [{id:'xyz', name:'a profile'},{id:'abc', name:'another profile'}];
$scope.profile = -1;
}

次に、サーバー側のコードを探しましたparams[:profile_id](これはたまたま Rails アプリでしたが、同じ原則がどこにでも当てはまります)。非表示の入力は選択と同じモデルを追跡するため、それらは自動的に同期されます (追加の JavaScript は必要ありません)。これが Angular の優れた点です。副作用として value 属性に対して行うことをほぼ埋め合わせます。

興味深いことに、この手法は非表示になっていない入力タグでのみ機能することがわかりました (これが、入力をページの外に移動するために margin-left:-10000px; トリックを使用する必要があった理由です)。次の 2 つのバリエーションは機能しませんでした。

<input name="profile_id" type="text" style="display:none;" ng-model="profile"/>

と

<input name="profile_id" type="hidden" ng-model="profile"/>

それは何かが欠けていることを意味しているに違いないと感じています。Angular の問題であるにはあまりにも奇妙に思えます。

于 2013-08-29T05:02:13.430 に答える
1

あなたが使用することができます

state.name for state in states track by state.code

JSON 配列の states で、state は配列内の各オブジェクトの変数名です。

お役に立てれば

于 2014-10-21T06:35:56.967 に答える
-2

以下のようにしてみてください。

var scope = $(this).scope();
alert(JSON.stringify(scope.model.options[$('#selOptions').val()].value));
于 2014-12-22T03:26:47.637 に答える