AngularJS - বুলিয়ান মান সহ মডেলগুলিতে রেডিও বোতাম বাঁধাই

Question

রেডিও বোতামগুলিকে এমন কোনও বস্তুর সাথে আবদ্ধ করতে আমার সমস্যা হচ্ছে যার সম্পত্তিগুলির বুলিয়ান মান রয়েছে। আমি একটি উত্স থেকে প্রাপ্ত পরীক্ষার প্রশ্নগুলি প্রদর্শনের চেষ্টা করছি।

এইচটিএমএল:

<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: সত্য" সম্পত্তি রেডিও বোতামটি নির্বাচন করতে দেয় না। যদি আমি বুলিয়ান মানগুলিকে উদ্ধৃতিগুলিতে আবদ্ধ করি তবে এটি কার্যকর হয়।

জাতীয়:

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

দুর্ভাগ্যক্রমে আমার আরএসটি পরিষেবা সে সম্পত্তিটিকে বুলিয়ান হিসাবে বিবেচনা করে এবং সেই মানগুলিকে উদ্ধৃত করতে JSON সিরিয়ালাইজেশন পরিবর্তন করা কঠিন হবে। আমার মডেলের কাঠামো পরিবর্তন না করে মডেল বাইন্ডিং সেটআপ করার অন্য উপায় আছে?

এখানে জেএসফিডালটি অ-কর্মক্ষম এবং কার্যক্ষম জিনিসগুলি দেখায়

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>

রেফ: সোজা ঘোড়ার মুখ থেকে

Comments

কেবল একটি গুরুত্বপূর্ণ পার্শ্ব নোট যোগ করতে চেয়েছিলেন: এনজি-মানটির কোঁকড়া ধনুর্বন্ধনী ছাড়া মান থাকতে হবে উদাহরণস্বরূপ: এনজি-মান = "পছন্দ2.id" বনাম মান = "{{পছন্দ2.id}}"

— অ্যান্ডি

হ্যাঁ, এটি সঠিক, কারণ এনজিও-মানটি সেই সুযোগে মূল্যায়ন করা হয়

— কুমারহর্ষ

@ অ্যান্ডি এই পক্ষের নোটের জন্য ধন্যবাদ, এটি আমার কিছুটা সময় ডিবাগ করতে বাঁচায়!

— রায় মাইল্ডার

আপনি মনে করেন ডেটা- উপসর্গটি আমি মনে করি ... ডেটা- উপসর্গটি এইচটিএমএলকে বৈধ করে তুলতে হবে (যদিও এটি ছাড়াও সমস্ত আধুনিক ব্রাউজারই এইচটিএমএলকে সঠিকভাবে পরিচালনা করে)

— কুমারহর্ষিস

আমি জানি পোস্টটি বেশ পুরানো তবে আমার এখন একই সমস্যা হয়েছে। তবে আমি যখন আপনার সমাধানটি ব্যবহার করি এবং রেডিও বোতামগুলি একবারে নির্বাচিত হয়ে থাকে সেগুলি সত্য হয় এবং সেগুলি মিথ্যাতে ফিরে যায় না। এটির কোন সমাধান আছে? (ওপি'র ফিডলটিতেও সমস্যা রয়েছে)

— ডোমিনিক জি

Answer 2

এটি সঙ্গে একটি বিজোড় পদ্ধতির isUserAnswer। আপনি কি সত্যিই সার্ভারে তিনটি পছন্দই প্রেরণ করতে যাচ্ছেন যেখানে এটি প্রতিটি পরীক্ষার মাধ্যমে লুপ হয়ে যাবে isUserAnswer == true? যদি তা হয় তবে আপনি এটি চেষ্টা করতে পারেন:

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

এইচটিএমএল:

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

বিকল্পভাবে, আমি আপনার ট্রাকটি পরিবর্তন করার পরামর্শ দেব:

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

— ল্যাংডন

হ্যাঁ, এটি কাজ করে! আমি এর আগে এনজিচেকড ব্যবহার করার চেষ্টা করেছি, তবে এনজিমোডেল বৈশিষ্ট্যটি সরিয়ে নেই। এটি সেই কনফিগারেশনের সাথে কাজ করে নি, এবং আমি ধরে নিয়েছিলাম যে এটি এনজিচেকড রেডিও বোতামগুলির সাথে সামঞ্জস্যপূর্ণ নয়। এনজিমোডেল বৈশিষ্ট্যটি সরানো এবং এনজিচেকড এবং বাঁধাই করা এনজি ব্যবহার করে আপনার সেটটিতে পছন্দ করুনফোরকিউশন ফাংশন আমি যা করার চেষ্টা করছি তা অর্জন করে। আপনার সাহায্যের জন্য ধন্যবাদ!

— peteallen

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সেই স্ট্রিংটি উদ্ধৃতিতে রাখতে হবে। এটা আমার ক্ষেত্রে ছিল।

— জেসন সোয়েট

এটি আমার পক্ষে সেরা উত্তর! ধন্যবাদ, রোনেল!

— গিসওয়ে

এনজি-চেক করা দরকার যতক্ষণ না এনজি-মডেল সংজ্ঞায়িত হয়

— নিকো ওয়েস্টারডেল

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

আপনার রেডিওগুলি যেভাবে ঝাঁকুনিতে সেট করা আছে - একই মডেলটি ভাগ করে নেওয়ার ফলে - যদি আপনি সত্যবাদী সমস্ত মানকে উদ্ধৃত করার সিদ্ধান্ত নেন তবে কেবলমাত্র শেষ গ্রুপটিকে একটি পরীক্ষিত রেডিও দেখানো হবে। আরও দৃ approach় পদ্ধতির মধ্যে পৃথক গোষ্ঠীগুলিকে তাদের নিজস্ব মডেল প্রদান করা জড়িত এবং মানটিকে রেডিওর অনন্য বৈশিষ্ট্য হিসাবে নির্ধারণ করে, যেমন আইডি:

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

এখানে নতুন এইচটিএমএল এর উপস্থাপনা:

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