angularjs - 바인딩 - ng-model ng-bind



AngularJS-부울 값이있는 모델에 라디오 버튼 바인딩 (5)

속성에 부울 값이있는 객체에 라디오 버튼을 바인딩하는 데 문제가 있습니다. $ 리소스에서 가져온 시험 문제를 표시하려고합니다.

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 serialization을 변경하기가 어려울 수 있습니다. 모델의 구조를 변경하지 않고 모델 바인딩을 설정하는 또 다른 방법이 있습니까?

작동하지 않는 작업 객체를 보여주는 jsFiddle이 있습니다.


Answer #1

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>

참조 : 말의 입에서 똑바로


Answer #2

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

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

Answer #3

나는 value="true"ng-value="true" 변경하려고 시도했으나 제대로 작동하는 것 같습니다.

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

또한 예제에서 두 입력을 모두 사용하려면 각 입력에 다른 이름을 지정해야합니다. 예를 들어 responseresponse1response2 가되어야합니다.


Answer #4

다음 내용을 살펴보십시오.

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

이 사람은 "true"와 "false"가 문자열이고 부울이 아니라는 문제를 해결하기 위해 사용자 지정 지시문을 작성했습니다.


Answer #5

isUserAnswer 사용한 이상한 접근 방식입니다. 세 가지 선택 사항을 모두 서버로 다시 isUserAnswer == true 확인하는 각 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}} 다시 서버로 보낼 수 있습니다.





radio