1. ホーム
  2. angularjs

[解決済み】ng-changeでng-objectが選択されるようになりました。

2022-03-27 09:58:12

質問

次のようなselect要素があるとする。

<select ng-options="size.code as size.name for size in sizes " 
        ng-model="item.size.code" 
        ng-change="update(MAGIC_THING)">
</select>

MAGIC_THINGを現在選択されているサイズと同じにして、アクセスできるようにする方法はありますか? size.namesize.code をコントローラで使用できますか?

size.codeはアプリの他の部分(画像のURLなど)に多く影響しますが、ng-modelで item.size.code が更新されます。 item.size.name は、ユーザー向けのものについても同様に更新する必要があります。これを行う正しい方法は、changeイベントをキャプチャしてコントローラ内で値を設定することだと思いますが、適切な値を取得するためにupdateに何を渡せばいいのかがわかりません。

もし、これが完全に間違った方法であれば、正しい方法を教えてほしいです。

どのように解決するのですか?

ng-modelにitem.size.codeを設定するのではなく、sizeに設定するのはどうでしょうか。

<select ng-options="size as size.name for size in sizes" 
   ng-model="item" ng-change="update()"></select>

そして update() メソッドを使用します。 $scope.item には、現在選択されている項目が設定されます。

そして、必要なコードは item.size.code を使用すると、そのプロパティを取得することができます。 $scope.item.code .

フィドル .

更新情報 は、コメントでいただいた詳細な情報をもとに作成しました。

その場合、select ng-modelには他の$scopeプロパティを使用してください。

<select ng-options="size as size.name for size in sizes" 
   ng-model="selectedItem" ng-change="update()"></select>

コントローラーです。

$scope.update = function() {
   $scope.item.size.code = $scope.selectedItem.code
   // use $scope.selectedItem.code and $scope.selectedItem.name here
   // for other stuff ...
}