AngularJS - बूलियन मूल्यों वाले मॉडल को रेडियो बटन बांधना

Question

मुझे रेडियो बटन को किसी वस्तु से बांधने में समस्या हो रही है, जिसके गुणों में बूलियन मूल्य हैं। मैं एक $ संसाधन से प्राप्त परीक्षा प्रश्नों को प्रदर्शित करने का प्रयास कर रहा हूं।

HTML:

<label data-ng-repeat="choice in question.choices">
  <input type="radio" name="response" data-ng-model="choice.isUserAnswer" value="true" />
  {{choice.text}}
</label>

जे एस:

$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" गुण रेडियो बटन को चुनने का कारण नहीं बनता है। अगर मैं उद्धरणों में बूलियन मानों को एन्क्रिप्ट करता हूं, तो यह काम करता है।

जे एस:

$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 क्रमांकन को बदलना मुश्किल होगा। क्या मेरे मॉडल की संरचना को बदलने के बिना मॉडल बाइंडिंग स्थापित करने का एक और तरीका है?

यहां गैर-कामकाजी और कामकाजी वस्तुओं को दर्शाने वाला jsField है

Answer 1

एंगुलरज में सही दृष्टिकोण 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>

Ref: सीधे घोड़े के मुंह से

Comments

बस एक महत्वपूर्ण पक्ष नोट जोड़ना चाहता था: एनजी-वैल्यू में घुंघराले ब्रेसिज़ के बिना मान होना चाहिए {{}} उदाहरण: ng-value = "choice2.id" बनाम value = "{{choice2.id}}"

— Andi

हां, यह सही है, क्योंकि एनजी-वैल्यू का मूल्यांकन उस दायरे में किया जाता है

— कुमारहर्ष

@ और इस साइड नोट के लिए धन्यवाद, इसने मुझे कुछ समय डिबगिंग से बचाया!

— रॉय मिलाप

मेरा मतलब है कि डेटा- उपसर्ग मुझे लगता है ... डेटा- उपसर्ग HTML को वैध बनाने के लिए है (हालांकि इसके बिना भी सभी आधुनिक ब्राउज़र HTML को सही ढंग से

— संभालते हैं

मुझे पता है कि पोस्ट काफी पुरानी है लेकिन मुझे अब वही समस्या मिली। लेकिन जब मैं आपके समाधान का उपयोग करता हूं और उन सभी रेडियो बटन को बदल देता हूं जो एक बार चुने गए थे, तो वे सच हैं और वे झूठे पर वापस नहीं जाते हैं। क्या इसका कोई समाधान है? (समस्या ओपी के फिडेल में भी मौजूद है)

— डोमिनिक जी

Answer 2

यह एक अजीब दृष्टिकोण है 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}}सर्वर पर वापस भेज सकते हैं ।

Comments

आपके प्रतिक्रिया के लिए धन्येवाद। मुझे पता है कि आपका दूसरा समाधान आदर्श है; हालाँकि, ऐप वास्तव में कई प्रकार के प्रश्नों का समर्थन करता है, जिसमें "सभी लागू करने वाले चेक" प्रश्न शामिल हैं - इसलिए प्रत्येक पसंद पर संग्रहीत किए जा रहे मूल्य का कारण। जो मैं बता सकता हूं, आपका पहला समाधान चयन के बाद मॉडल को अपडेट करने के लिए काम करता है, लेकिन सर्वर से प्राप्त मॉडल को प्रदर्शित करने के लिए नहीं जो पहले से बना हुआ है।

— पेटीलीन

आह, सच। आप इसका उपयोग करके हल कर सकते हैं ngChecked, सिवाय इसके कि आपको स्ट्रिंग्स के रूप में सही / गलत का उपयोग करने से दूर होना होगा। क्या आप यह कर सकते हैं? jsfiddle.net/hgxjv/6

— लैंगडन

हाँ, वह काम करता है! मैंने पहले ngChecked का उपयोग करने की कोशिश की थी, लेकिन ngModel विशेषता को नहीं हटाया था। यह उस कॉन्फ़िगरेशन के साथ काम नहीं करता था, और मैंने यह मान लिया था कि ऐसा इसलिए था क्योंकि ngChecked रेडियो बटन के साथ संगत नहीं था। NgModel विशेषता को हटाने और अपने setChoiceForQuestion फ़ंक्शन के लिए ngChecked और बाइंडिंग ngClick का उपयोग करने से वह प्राप्त होता है जो मैं करने की कोशिश कर रहा हूं। आपके सहयोग के लिए धन्यवाद!

— पेटेलीन

Answer 3

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

Comments

मुझे लगता है कि यह केवल काम करता है क्योंकि trueसच का मूल्यांकन करता है। यदि आपकी ng-valueस्ट्रिंग एक है, उदाहरण के लिए, और किसी चीज़ का संदर्भ नहीं है $scope, तो आपको उस स्ट्रिंग को उद्धरण में रखना होगा। मेरे लिए यही मामला था।

— जेसन स्वेट

यह मेरे लिए सबसे अच्छा जवाब है! धन्यवाद, रोनेल!

— 19

जब तक एनजी-मॉडल को परिभाषित नहीं किया जाता तब तक एनजी-चेक की यहाँ आवश्यकता नहीं है

— निको वेस्टरडेल

Answer 4

मैं बदल रहा है की कोशिश की value="true"करने के लिए ng-value="true", और यह काम करने लगता है।

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

इसके अलावा, आपके उदाहरण में काम करने के लिए दोनों इनपुट प्राप्त करने के लिए, आपको प्रत्येक इनपुट को अलग नाम देना होगा - जैसे responseबनना चाहिए response1और response2।

Comments

नहीं, नाम समान हो सकते हैं।

— कुमारहर्ष

Answer 5

आप इस पर एक नज़र डाल सकते हैं:

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

इस आदमी ने इस मुद्दे को घुमाने के लिए एक कस्टम निर्देश लिखा कि "सच्चे" और "झूठे" तार हैं, बुलियन नहीं।

Answer 6

जिस तरह से आपके रेडियो को फिडेल में सेट किया जाता है - उसी मॉडल को साझा करते हुए - केवल अंतिम समूह का कारण होगा एक चेक किए गए रेडियो को दिखाने के लिए यदि आप सभी सत्य मूल्यों को उद्धृत करने का निर्णय लेते हैं। एक अधिक ठोस दृष्टिकोण में व्यक्तिगत समूहों को अपना मॉडल देना शामिल होगा, और मूल्य को रेडियो की एक अनूठी विशेषता के रूप में सेट करना होगा, जैसे कि आईडी:

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

और एक बेला।

Answer 7

यदि आप रेडियो बटन को बांधने के लिए बूलियन चर का उपयोग कर रहे हैं। कृपया नमूना कोड नीचे देखें

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