[解決済み】AngularJS - ブーリアン値を持つモデルへのラジオボタンのバインド
2022-04-15 13:13:33
質問
プロパティがブーリアン値を持つオブジェクトにラジオボタンをバインドするのに問題があります。私は$resourceから取得された試験問題を表示しようとしています。
HTMLです。
<label data-ng-repeat="choice in question.choices">
<input type="radio" name="response" data-ng-model="choice.isUserAnswer" value="true" />
{{choice.text}}
</label>
JSです。
$scope.question = {
questionText: "This is a test question.",
choices: [{
id: 1,
text: "Choice 1",
isUserAnswer: false
}, {
id: 2,
text: "Choice 2",
isUserAnswer: true
}, {
id: 3,
text: "Choice 3",
isUserAnswer: false
}]
};
この例のオブジェクトでは、"isUserAnswer: true"プロパティはラジオボタンを選択させることはありません。ブーリアン値を引用符で囲むと、うまくいきます。
JSです。
$scope.question = {
questionText: "This is a test question.",
choices: [{
id: 1,
text: "Choice 1",
isUserAnswer: "false"
}, {
id: 2,
text: "Choice 2",
isUserAnswer: "true"
}, {
id: 3,
text: "Choice 3",
isUserAnswer: "false"
}]
};
残念ながら、私のRESTサービスはそのプロパティをブーリアンとして扱い、それらの値を引用符で囲むようにJSONシリアライズを変更することは難しいでしょう。モデルの構造を変更せずにモデルバインディングをセットアップする他の方法はありますか?
以下は、動作しないオブジェクトと動作するオブジェクトを表示したjsFiddleです。
解決方法は?
Angularjsでの正しいアプローチは
ng-value
は、モデルの非文字列の値です。
このようにコードを修正します。
<label data-ng-repeat="choice in question.choices">
<input type="radio" name="response" data-ng-model="choice.isUserAnswer" data-ng-value="true" />
{{choice.text}}
</label>
参考 馬の口から直接
関連
-
[解決済み] X-Frame-Options'を'SAMEORIGIN'に設定しているため、フレーム内での表示を拒否された。
-
[解決済み] AngularJSのシンプルな "Hello, world "が動作しない。
-
[解決済み] angularjsで$compileを操作する
-
[解決済み] どのように$state.goにパラメータを追加しますか?
-
[解決済み] AngularJs .$setPristineでフォームをリセットする
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] 入力フィールドにフォーカスを当てるには?
-
[解決済み] 検索エンジンはAngularJSアプリケーションをどのように扱っているのか?
-
[解決済み] AngularJSのng-repeatでキーと値を反復処理する方法は?
-
[解決済み] AngularJSでチェックボックスの値のリストにバインドするにはどうすればいいですか?
最新
-
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
-
[解決済み】Angular ui-routerで$stateメソッドを$stateChangeStart toStateとfromStateで使用する。
-
[解決済み] AngularJsでng-Cloakディレクティブを実際に使用する方法とは?
-
[解決済み] エラーです。[$injector:unpr] 不明なプロバイダです。ルートプロバイダ
-
angularjsのルーティングについて $stateと$stateParamsの話
-
angularでのng-repeatとtrack by
-
[解決済み] どのように$state.goにパラメータを追加しますか?
-
[解決済み] 入力フィールドにフォーカスを当てるには?
-
[解決済み] ng-repeat :単一フィールドによるフィルタリング
-
[解決済み] 子コントローラから親スコープにアクセスするAngularJS