AngularJS - Mengikat tombol radio ke model dengan nilai boolean

Saya mengalami masalah pengikatan tombol radio ke objek yang propertinya memiliki nilai boolean. Saya mencoba menampilkan pertanyaan ujian yang diambil dari sumber daya $.

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

Dengan objek contoh ini, properti "isUserAnswer: true" tidak menyebabkan tombol radio dipilih. Jika saya merangkum nilai boolean dalam tanda kutip, itu berfungsi.

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

Sayangnya layanan REST saya memperlakukan properti itu sebagai boolean dan akan sulit untuk mengubah serialisasi JSON untuk merangkum nilai-nilai tersebut dalam tanda kutip. Apakah ada cara lain untuk mengatur model yang mengikat tanpa mengubah struktur model saya?

Inilah jsFiddle yang menunjukkan objek yang tidak bekerja dan bekerja

Pendekatan yang benar dalam Angularjs adalah untuk digunakan ng-valueuntuk nilai-nilai non-string model.

Ubah kode Anda seperti ini:

<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: Langsung dari mulut kuda

Itu pendekatan yang aneh dengan isUserAnswer. Apakah Anda benar-benar akan mengirim ketiga pilihan kembali ke server di mana ia akan mengulangi masing-masing memeriksa isUserAnswer == true? Jika demikian, Anda dapat mencoba ini:

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

Atau, saya sarankan mengubah taktik Anda:

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

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

Dengan begitu Anda bisa mengirim {{question1.userChoiceId}}kembali ke server.

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

Aku mencoba mengubah value="true"ke ng-value="true", dan tampaknya bekerja.

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

Juga, untuk mendapatkan kedua input berfungsi dalam contoh Anda, Anda harus memberikan nama yang berbeda untuk setiap input - misalnya responseharus menjadi response1dan response2.

Anda mungkin melihat ini:

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

Orang ini menulis arahan khusus untuk mengatasi masalah bahwa "benar" dan "salah" adalah string, bukan boolean.

Cara radio Anda diatur dalam biola - berbagi model yang sama - hanya akan menyebabkan kelompok terakhir menampilkan radio yang dicentang jika Anda memutuskan untuk mengutip semua nilai kebenaran. Pendekatan yang lebih solid akan melibatkan pemberian masing-masing kelompok model mereka sendiri, dan menetapkan nilai sebagai atribut unik dari radio, seperti id:

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

Berikut ini adalah representasi dari html baru:

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

Dan biola.

jika Anda menggunakan variabel boolean untuk mengikat tombol radio. silakan lihat kode contoh di bawah ini

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