AngularJS-ラジオボタンをブール値のモデルにバインドする

プロパティにブール値があるオブジェクトにラジオボタンをバインドするときに問題が発生します。$ 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>

参照：馬の口からまっすぐ

これはでの奇妙なアプローチisUserAnswerです。本当に3つの選択肢すべてをサーバーに送り返し、サーバーはそれぞれのチェックをループしisUserAnswer == trueますか？もしそうなら、これを試すことができます：

http://jsfiddle.net/hgxjv/4/

HTML：

<input type="radio" name="response" value="true" ng-click="setChoiceForQuestion(question1, choice)"/>

JavaScript：

$scope.setChoiceForQuestion = function (q, c) {
    angular.forEach(q.choices, function (c) {
        c.isUserAnswer = false;
    });

    c.isUserAnswer = true;
};

または、タックを変更することをお勧めします。

http://jsfiddle.net/hgxjv/5/

<input type="radio" name="response" value="{{choice.id}}" ng-model="question1.userChoiceId"/>

そうすれば{{question1.userChoiceId}}、サーバーに送り返すことができます。

 <label class="rate-hit">
     <input type="radio" ng-model="st.result" ng-value="true" ng-checked="st.result">
     Hit
 </label>
 &nbsp;&nbsp;
 <label class="rate-miss">
     <input type="radio" ng-model="st.result" ng-value="false" ng-checked="!st.result">
     Miss
 </label>

に変更value="true"してみましたがng-value="true"、動作するようです。

<input type="radio" name="response2" data-ng-model="choice.isUserAnswer" ng-value="true" />

また、例で両方の入力を機能させるには、各入力に異なる名前を付けるresponse必要がresponse1ありresponse2ます。たとえば、とにする必要があります。

あなたはこれを見るかもしれません：

https://github.com/michaelmoussa/ng-boolean-radio/

この男は、「true」と「false」がブール値ではなく文字列であるという問題を回避するためのカスタムディレクティブを作成しました。

無線がフィドルでセットアップされる方法-同じモデルを共有する-は、すべての真実の値を引用することにした場合、最後のグループのみにチェック済みの無線を表示します。より堅実なアプローチには、個々のグループに独自のモデルを与え、IDなどの無線の一意の属性として値を設定することが含まれます。

$scope.radioMod = 1;
$scope.radioMod2 = 2;

新しいhtmlを以下に示します。

<label data-ng-repeat="choice2 in question2.choices">
            <input type="radio" name="response2" data-ng-model="radioMod2" value="{{choice2.id}}"/>
                {{choice2.text}}
        </label>

そしてフィドル。

ブール変数を使用してラジオボタンをバインドしている場合。以下のサンプルコードを参照してください

<div ng-repeat="book in books"> 
<input type="radio" ng-checked="book.selected"  
ng-click="function($event)">                        
</div>