Angular array and ng-repeat for ratio group - javascript

I want to make a questionnaire which I can fill directly in the app's variables, due I don't have any database in this little project. The questionaire is made by 20 questions and I am using radio buttons for selecting the answer. At end end of the questionaire I will need to show the selected answers, for this I did the scope object testResult
Initially, I was thinking to fill all 20 questions and radio variables manually, but I saw a ng-repeat angular function that can be helpful, and will like to know if I can use it in the this case.
I may be storing the initial values of each radio group inside and array, and then print them in the view using ng-repeat. I don't really have a clue where to start.
The next are piece of code related to my project.
View
<div class="form-group">
<div class="radio">
<label><input type="radio" name="qs01" ng-model="testResult.qs01" value="1">
Question One.
</label>
</div>
<div class="radio">
<label><input type="radio" name="qs01" ng-model="testResult.qs01" value="2">
Question Two.
</label>
</div>
<div class="radio">
<label><input type="radio" name="qs01" ng-model="testResult.qs01" value="3">
Question Three.
</label>
</div>
<div class="radio">
<label><input type="radio" name="qs01" ng-model="testResult.qs01" value="4">
Question Four.
</label>
</div>
<div class="radio">
<label><input type="radio" name="qs01" ng-model="testResult.qs01" value="5">
Question Five.
</label>
</div>
</div>
App
// Test Result Object
$scope.testResult = {};
What I need to repeat is:
<div class="radio">
<label><input type="radio" name="qs01" ng-model="testResult.qs01" value="Question Variable">
Question Variable
</label>
</div>

You are putting different labels on each radio. But each radio is an option for the value of the same question.
You need to include radio options array to use ng-repeat. So you could do:
$scope.qs01Options = ['blue', 'red', 'yellow'];
<div class="form-group">
<div class="radio">
<label>Question One.</label>
<input ng-repeat="opt in qs01Options" type="radio" name="qs01" ng-model="testResult.qs01" value="{{opt}}">
</div>
</div>
This repeats the options for 1 question. The name stays the same because that's how radio inputs for the same field work in a form.
If you want to have multiple questions, each with multiple options, you need to use an array of arrays; each object would hold an array of options for that question.

Related

I need help to get the Name of radio button using JavaScript not the value

Hi i am using below HTML for radio button question there are different option with different values
<div class="form-check-inline section-3">
<input class="form-check-input" type="radio" name="question1" id="gridRadios1" value="1">
<label class="form-check-label" for="gridRadios1">
Never
</label>
</div>
You will see the the radio button value is "1" but in screen when question appear it shows "Never" .... i want to get this Never text using Java script when i am using $("input[name=‘question1’]:checked").val(); i am getting value which is 1 but i want text which "Never" how to get that ....
let $input = $("input[name='question1']:checked");
$input.siblings(`label[for='${$input.attr('id')}']`).text();

angular Dynamic html binding with radio buttons

I am getting HTML data from an API and this Html has two radio buttons and some text. In my app, I am binding this Html in modal by [innerHtml]="example|safeHtml" and when I change the radio button option, I want to get these values on click of modal submit button. Here is my Html:
<div class="safeCustody-charge">
<p class="para1">This is to inform you that effective 1 September 2019</p>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios55" id="exampleRadios1" value="option1" checked="checked">
<label class="form-check-label" for="exampleRadios1">
<span style="color:red">Option 1:</span> I acknowledge the policy change
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios55" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
<span style="color:red">Option 2:</span> I do not wish to pay
</label>
</div>
Since you're putting the html in with the [innerHtml] directive, you cannot use any Angular mechanics do get the values. Try using vanilla js functions, like for example
document.getElementById('exampleRadios1').value
You may need to cast the returning element to a HTMLInputElement for type checks.
Personally I wouldn't get the HTML from a seperate resource. Instead you could return some JSON from your server, then use some *ngFor logic to display the content as needed.

How to use both radio buttons and checkboxes in same fieldset?

I have created a survey form that generates an email containing the answers provided. The issue I am having is that one question requires a radio button for three choices but then needs to include checkboxes below that may be use to append information to the radio button choice selected. Here is an example of the code I am describing:
<fieldset data-role="controlgroup">
<label for="q_planName" id="q_formStatus_title">Choose one of the following headline options:</label>
<input type="radio" name="q_formStatus" id="q_formStatus_1" onchange="onSelectionChanged(this);" />
<label for="q_formStatus_1"Blah 1</label>
<input type="radio" name="q_formStatus" id="q_formStatus_2" onchange="onSelectionChanged(this);" />
<label for="q_formStatus_2">Blah 2</label>
<input type="radio" name="q_formStatus" id="q_formStatus_3" onchange="onSelectionChanged(this);" />
<label for="q_formStatus_3">Blah 3
<br/>The following indications may be appended to any headline option:<br/><br/>
<input type="checkbox" name="q_formStatus" id="q_formStatus_4" ;" />
<label for="q_formStatus_4">Date of blah required?</label>
<input type="checkbox" name="q_formStatus" id="q_formStatus_5" ;" />
<label for="q_formStatus_5">Blah is non regulated.</label></fieldset>
This looks fine in the form but the code that is used to print these results in the email is identifying this question as a radio input so it is storing the answer as a single response rather than an array (ie. it will print Q: questionTitle, A: answerValue instead of Q:questionTitle, A1:answerValue1,A2:answerValue2 etc.)
Note that these questions had to go through an approval process so please don't just suggest separating it into two separate questions or adding a "None of the above selection".
Thanks!
You need to use different names because each field needs to be identified individually by the server.

Model won't update in Angular 2 radio list

I'm trying to build a Angular 2 component which displays a list of options with radios. It works fine but it the answer field of the component, which is bound inside [(ng-model)]="answer", won't update when selecting one of the options. Am I doing something wrong or isn't this the way to create a list of radio selection options?
<div>
Answer: {{ answer }}
</div>
<div class="radio" *ng-for="#option of itemData">
<label>
<input type="radio" [value]="option.id" [(ng-model)]="answer"
(change)="responseChanged()" name="radio-list">
<span>{{ option.name }}</span>
</label>
</div>
Plunker
Well i guess two way binding is now working with radio, so currently you cannot use [(ng-model)].
The alternative is to use the change event and checked attribute. See my plunker
https://plnkr.co/edit/7Zm3qgoSv22Y9KrBn4tS?p=preview
(change)="answer=$event.target.value"
and
[checked]='answer==option.id'
You cannot use ng-model with radio boxes like in angular1. However there are several components on github that allows you to do it easily, like ng2-radio-group component. It has support for both radio select and multiple checkboxes select:
<radio-group [(ngModel)]="sortBy">
<input type="radio" value="rating"> Rating<br/>
<input type="radio" value="date"> Date<br/>
<input type="radio" value="watches"> Watch count<br/>
<input type="radio" value="comments"> Comment count<br/>
</radio-group>
<checkbox-group [(ngModel)]="orderBy">
<input type="checkbox" value="rating"> Rating<br/>
<input type="checkbox" value="date"> Date<br/>
<input type="checkbox" value="watches"> Watch count<br/>
<input type="checkbox" value="comments"> Comment count<br/>
</checkbox-group>

Checkbox appear when certain radio selected

<label class="radio inline">
<input type="radio" name="drivesize" id="drivesize" value="250 GB" required>250GB
</label>
<label class="radio inline">
<input type="radio" name="drivesize" id="drivesize" value="500 GB">500GB
</label>
I have the above bit of html in my webpage and I'd like to add the following if the 500GB radio button is selected.
<label class="checkbox inline">
<input type="checkbox" name="mappings" id="mappings" value="Done" required>Done
</label>
Can anybody tell me the best to do this?
Just a note: you should not use duplicate IDs (see #drivesize). IDs should be unique while classes can be reused. If you change your IDs, it can be easier to check.
Here's a bit of jQuery that should allow you to check for if the box is checked. We will assume that you changed the 500GB ID to largeDrive, the Done button is hidden from view, and you have an event handler on the radio buttons.
if ($('input#largeDrive').is(':checked')) {
$('input#mappings').show(); //assuming it was hidden
}

Categories

Resources