[解決済み】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.name
と
size.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 ...
}
関連
-
[解決済み】angularのonLoadとng-initの違いについて
-
[解決済み】Angularjs accordion ng-click on panel-header
-
[解決済み] AngularJs ReferenceError: $http is not defined
-
[解決済み] AngularJSのシンプルな "Hello, world "が動作しない。
-
[解決済み] AngularJSを使用して、ブラウザのコンソールで$scope変数にアクセスするにはどうすればよいですか?
-
[解決済み] クラスを条件付きで適用する場合の最適な方法は何ですか?
-
[解決済み] ng-repeat :単一フィールドによるフィルタリング
-
[解決済み] ng-repeat内のng-click関数にパラメータを追加しても、うまくいかないようです。
-
[解決済み】AngularJSのディレクティブスコープにおける「@」と「=」の違いは何ですか?
-
[解決済み] AngularJSとng-repeatによるselectの初期化
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
angularjs ローカルデータストレージ LocalStorage
-
[解決済み] 方法 $state.go()
-
[解決済み] angularのpostリクエストでpreflightのレスポンスがHTTPステータスコード403で不正になる。
-
[解決済み] data-ng-file-selectが動作しないのはなぜですか?
-
[解決済み] どのようにangularJSでrouteProviderとlocationProviderを設定するのですか?
-
[解決済み] エラーです。10回の$digest()反復に達しました。動的なsortby述語で中断!?
-
[解決済み] AngularJSの「href」と「ng-href」の違いについて
-
[解決済み] ngInject'を本当に書く必要があるのか?
-
[解決済み] ng-modelとng-bindの違いは何ですか?
-
[解決済み] 子コントローラから親スコープにアクセスするAngularJS