5

選択ボックスをレンダリングしようとしていますが、期待どおりに動作しません - オプションの値が正しくありません。マニュアルを確認しました。それによると、配列の構文（私の場合はオブジェクトの配列）は次のとおりです

select as label for value in array

だからここに私がやっていることがあります：

データ：

[{"id":"3","name":"asdasd","code":"asdads","group":"2","cost":"0"},{"id":"4","name":"adrf fg df ","code":"dasfasd","group":"2","cost":"0"}]

テンプレート：

<select ng-model="productToBuy" ng-options="item.id as item.id for item in products"></select>

レンダリング結果:

<select ng-model="productToBuy" ng-options="item.id as item.id for item in products" class="ng-pristine ng-valid">
    <option value="0" selected="selected">3</option>
    <option value="1">4</option>
</select>

ご覧のとおり、オプションの値はアイテムの ID に設定されていません。

また、ソースが配列の場合、これは適切な構文ではない可能性がありますが、次のようにしようとすると同じ結果になります:

<select ng-model="productToBuy" ng-options="item.id as item.id for (key, item) in products"></select>

このコードをjsfiddleに置きました。どんな助けでも感謝します。

4

3 に答える 3

12

これは ngOptions ディレクティブの動作です (表示されている出力。値は項目のインデックスであり、コード サンプルから渡そうとする id プロパティではありません)。ngOptions は、選択したオプションを ngModel で指定した変数にデータバインドします。次に、オプション要素自体の「値」ではなく、データ バインド変数を使用します。

HTML:

<select ng-model="selected" ng-options="item.name for item in items"></select> {{ selected }}

JS:

$scope.items = [
    {"id": "3","name":"asdasd","code":"asdads","group":"2","cost":"0"},
    {"id": "4","name":"adrf fg df ","code":"dasfasd","group":"2","cost":"0"}
];

上記の例では、$scope.selected は実際に選択されたアイテムを表します。その後、選択したアイテムのプロパティのいずれかにアクセスできます: $scope.selected.name、$scope.selected.code... など。

上記の例で項目を事前に選択する必要がある場合は、次のようにすることができます。

$scope.items = [
    {"id": "3","name":"asdasd","code":"asdads","group":"2","cost":"0"},
    {"id": "4","name":"adrf fg df ","code":"dasfasd","group":"2","cost":"0"}
];
$scope.selected = $scope.items[1]; // Pre-selected the 2nd item in your array

それでも値属性を完全に制御する必要がある場合は、ng-repeat ディレクティブを使用することをお勧めしますが、これを行うと、選択した項目がモデルにデータ バインドされないことに注意してください。

編集:「配列内の値のラベルとして選択」構文に関する注意:

参考までに、「製品内のアイテムの item.name としての item.id」が実際に行っていたのは、構文の選択部分で指定した値に ngModel ディレクティブの変数を設定することでした。したがって、その式が行っているのは、ラベルを item.name として設定することですが、$scope.selected を item 自体のインスタンス全体ではなく、item.id の値にバインドしています。したがって、上記の例で最初のアイテムが選択された場合、$scope.selected は「3」に等しくなります。option 要素自体の value 属性を実際に変更するわけではありません。

于 2012-12-18T14:22:50.873 に答える
1

のJSONオブジェクトのデータ型idはastringで、値は$scope.selectedですinteger。それらの1つを他に切り替えると、正常に機能します。

オプションの値は引き続き0と1になりますが、Angularのデータバインディングがトリックを実行し、式で指定した値（item.id as item.name）を親要素のng-modelにバインドします。 （選択要素）。

于 2012-12-18T14:00:58.773 に答える