AngularJS-부울 값을 가진 모델에 라디오 버튼 바인딩


199

속성에 부울 값이있는 객체에 라디오 버튼을 바인딩하는 데 문제가 있습니다. $ 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은 다음과 같습니다.

답변:


376

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>

참조 : 말의 입에서 똑바로


12
ng-value에는 중괄호 {{}}가없는 값이 있어야합니다. 예 : ng-value = "choice2.id"vs value = "{{{choice2.id}}"
Andi

NG-값이 그 범위에 평가로 네, 정확
kumarharsh

@Andi이 쪽지 주셔서 감사합니다. 디버깅 시간을 절약했습니다!
Roy Milder

3
당신은 내가 생각 하는 데이터 접두사를 의미합니다 ... 데이터 접두사는 HTML을 유효하게 만드는 것입니다 (그렇지 않으면 모든 최신 브라우저가 HTML을 올바르게 처리하지만)
kumarharsh

6
게시물이 상당히 오래되었다는 것을 알고 있지만 지금 같은 문제가 있습니다. 그러나 솔루션을 사용하고 라디오 버튼을 변경하면 한 번 선택한 모든 항목이 true이고 다시 false로 전환되지 않습니다. 이에 대한 해결책이 있습니까? (OP의 바이올린에도 문제가 있습니다)
Dominik G

21

의 이상한 접근 방식입니다 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}}하면 서버 로 다시 보낼 수 있습니다 .


답변 주셔서 감사합니다. 두 번째 솔루션이 이상적입니다. 그러나 앱은 실제로 "적용 가능한 모든 항목 확인"질문을 포함하여 여러 유형의 질문을 지원하므로 각 선택에 값이 저장되는 이유가 있습니다. 내가 알 수 있듯이 첫 번째 솔루션은 선택 후 모델을 업데이트하는 데 효과적이지만 서버에서 검색 한 모델을 이미 선택한 것으로 표시하지는 않습니다.
peteallen

2
아 맞아 ngCheckedtrue / false를 문자열로 사용하지 않아야한다는 점을 제외하고는을 사용하여 해결할 수 있습니다 . 그렇게 할 수 있습니까? jsfiddle.net/hgxjv/6
Langdon

3
그렇습니다. 이전에 ngChecked를 사용해 보았지만 ngModel 속성을 제거하지 않았습니다. 해당 구성에서는 작동하지 않았으며 ngChecked가 라디오 버튼과 호환되지 않기 때문이라고 가정했습니다. ngModel 속성을 제거하고 ngChecked를 사용하고 ngClick을 setChoiceForQuestion 함수에 바인딩하면 내가하려는 일을 달성합니다. 도와 주셔서 감사합니다!
peteallen

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

나는 이것이 true참으로 평가 되기 때문에 이것이 효과가 있다고 생각 합니다. 당신이 경우 ng-value예를 들어 문자열, 그리고 뭔가에 대한 참조입니다 $scope, 당신은 인용 부호로 해당 문자열을 넣어해야합니다. 그것이 저의 경우였습니다.
Jason Swett

이것은 나에게 가장 좋은 대답입니다! 고마워, 로넬!
Gisway

정의 겨 모델만큼 여기에 필요하지 않습니다 NG-확인
니코 Westerdale

7

나는 변화 시도 value="true"ng-value="true", 그것은 작동하는 것 같다.

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

또한 예제에서 두 입력을 모두 사용하려면 각 입력에 다른 이름을 지정 response해야합니다 ( 예 : response1및) response2.


1
아니요, 이름은 동일 할 수 있습니다.
kumarharsh


0

동일한 모델을 공유하는 바이올린에서 무전기가 설정되는 방식은 모든 진실한 값을 인용하기로 결정한 경우 마지막 그룹 만 선택된 무전기를 표시합니다. 보다 확실한 접근 방식은 개별 그룹에 고유 한 모델을 제공하고 값을 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

부울 변수를 사용하여 라디오 버튼을 바인딩하는 경우. 아래의 샘플 코드를 참조하십시오

<div ng-repeat="book in books"> 
<input type="radio" ng-checked="book.selected"  
ng-click="function($event)">                        
</div>
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.