web-dev-qa-db-ja.com

AngularJS - ブール値を持つモデルへのラジオボタンのバインド

プロパティがブール値を持つオブジェクトにラジオボタンをバインドするのに問題があります。 $リソースから取得した試験問題を表示しようとしています。

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です

angularjsdata-bindingmodelradio
194
peteallen

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>

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

366
kumar_harsh

これはisUserAnswerを使った奇妙なアプローチです。あなたは本当に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}}をサーバーに送り返すことができます。

20
Langdon
 <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>
10
Ronel Gonzales

私はvalue="true"をng-value="true"に変更しようとしました、そして、それはうまくいくようです。

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

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

7
seung

これを見てみるとよいでしょう。

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

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

1
Karen Zilles

無線をフィドルに設定する方法（同じモデルを共有する方法）では、すべての真の値を引用することにした場合、最後のグループだけがチェックされた無線を表示します。より強固なアプローチは個々のグループに彼ら自身のモデルを与えて、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>

そしていじる。

0
rGil

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

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