AngularJS - Liên kết các nút radio với các mô hình có giá trị boolean

Tôi đang gặp vấn đề liên kết các nút radio với một đối tượng có thuộc tính có giá trị boolean. Tôi đang cố gắng hiển thị các câu hỏi thi lấy từ tài nguyên $.

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

Với đối tượng ví dụ này, thuộc tính "isUserAnswer: true" không làm cho nút radio được chọn. Nếu tôi gói gọn các giá trị boolean trong dấu ngoặc kép, nó hoạt động.

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

Thật không may, dịch vụ REST của tôi coi thuộc tính đó là boolean và sẽ rất khó để thay đổi tuần tự hóa JSON để gói gọn các giá trị đó trong dấu ngoặc kép. Có cách nào khác để thiết lập liên kết mô hình mà không thay đổi cấu trúc mô hình của tôi không?

Đây là jsFiddle hiển thị các đối tượng không hoạt động và làm việc

Cách tiếp cận đúng trong Angularjs là sử dụng ng-valuecho các giá trị không phải là chuỗi của các mô hình.

Sửa đổi mã của bạn như thế này:

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

Tham khảo: Thẳng từ miệng ngựa

Đó là một cách tiếp cận kỳ lạ với isUserAnswer. Bạn có thực sự sẽ gửi cả ba lựa chọn trở lại máy chủ nơi nó sẽ lặp qua từng lựa chọn isUserAnswer == truekhông? Nếu vậy, bạn có thể thử điều này:

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

Ngoài ra, tôi khuyên bạn nên thay đổi chiến thuật của mình:

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

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

Bằng cách đó bạn chỉ có thể gửi {{question1.userChoiceId}}lại cho máy chủ.

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

Tôi đã cố gắng thay đổi value="true"để ng-value="true", và có vẻ như để làm việc.

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

Ngoài ra, để làm cho cả hai đầu vào hoạt động trong ví dụ của bạn, bạn phải đặt tên khác nhau cho mỗi đầu vào - ví dụ: responsenên trở thành response1và response2.

Bạn có thể xem cái này:

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

Anh chàng này đã viết một chỉ thị tùy chỉnh để giải quyết vấn đề "đúng" và "sai" là các chuỗi, không phải là booleans.

Cách radio của bạn được thiết lập trong fiddle - chia sẻ cùng một mô hình - sẽ chỉ khiến nhóm cuối cùng hiển thị radio đã kiểm tra nếu bạn quyết định trích dẫn tất cả các giá trị trung thực. Một cách tiếp cận vững chắc hơn sẽ liên quan đến việc cung cấp cho các nhóm riêng lẻ mô hình riêng của họ và đặt giá trị làm thuộc tính duy nhất của radio, chẳng hạn như id:

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

Đây là một đại diện của html mới:

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

Và một câu đố.

nếu bạn đang sử dụng biến boolean để liên kết nút radio. vui lòng tham khảo mã mẫu bên dưới

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