AngularJS - Radyo düğmelerini boole değerleri olan modellere bağlama

Özellikleri boolean değerleri olan bir nesneye radyo düğmeleri bağlama bir sorun yaşıyorum. Bir $ kaynağından alınan sınav soruları görüntülemeye çalışıyorum.

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
        }]
};   

Bu örnek nesnede, "isUserAnswer: true" özelliği radyo düğmesinin seçilmesine neden olmaz. Boole değerlerini tırnak işaretleri içine alırsam çalışır.

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"
        }]
};   

Ne yazık ki benim REST hizmetim bu özelliği bir boole olarak davranır ve bu değerleri tırnak içinde kapsüllemek için JSON serileştirme değiştirmek zor olacaktır. Model bağlantımı modelimin yapısını değiştirmeden kurmanın başka bir yolu var mı?

İşte çalışmayan ve çalışmayan nesneleri gösteren jsFiddle

Angularjs'de doğru yaklaşım ng-value, modellerin dizgi dışı değerleri için kullanmaktır .

Kodunuzu şu şekilde değiştirin:

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

Ref: Atın ağzından düz

Bu tuhaf bir yaklaşım isUserAnswer. Gerçekten her üç seçeneği de kontrol için her biri döngü olacak sunucuya geri gönderecek misiniz isUserAnswer == true? Öyleyse, bunu deneyebilirsiniz:

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;
};

Alternatif olarak, yapışkanlığınızı değiştirmenizi tavsiye ederim:

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

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

Bu şekilde {{question1.userChoiceId}}sunucuya geri gönderebilirsiniz .

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

Ben değiştirmeyi denedim value="true"etmek ng-value="true"ve bu işe görünüyor.

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

Ayrıca, her iki girdinin de örneğinizde çalışmasını sağlamak için, her girdiye farklı bir ad vermeniz gerekir; örneğin response, response1ve olmalıdır response2.

Şuna bir göz atabilirsiniz:

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

Bu adam, "doğru" ve "yanlış" ifadelerinin boolelar değil, dizeler olduğu sorununu çözmek için özel bir yönerge yazdı.

Radyolarınızın kemanda nasıl kurulduğunu - aynı modeli paylaştığını - tüm doğru değerleri belirtmeye karar verirseniz, yalnızca son grubun kontrol edilmiş bir radyo göstermesine neden olur. Daha sağlam bir yaklaşım, bireysel gruplara kendi modellerini vermeyi ve değeri, id gibi radyoların benzersiz bir özelliği olarak ayarlamayı içerir:

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

İşte yeni html'in bir temsili:

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

Ve bir keman.

radyo düğmesini bağlamak için boolean değişkeni kullanıyorsanız. lütfen aşağıdaki örnek koda bakın

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