1. ホーム
  2. angularjs

[解決済み】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>

参考 馬の口から直接