[angularjs] 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. 실제로 세 가지 선택 사항을 모두 서버로 다시 전송하여 각 항목을 검사 할 것 isUserAnswer == true입니까? 그렇다면 다음을 시도하십시오.

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

HTML :

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

자바 스크립트 :

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