angular Dynamic html binding with radio buttons - javascript

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.

Related

How to show and hide multiple divs by using multiple checkboxes in angularjs?

How to show and hide divs based on the checkbox checked? I'm using the below code in angular js. I have 3 checkboxes, if one checkbox is clicked the respective div should be shown and the other div should be hidden.
<label class="checkbox-inline" style="margin-top: 7px;">
<input type="checkbox" id="chkSmall" name="small" class="bgCheck" value="small" data-ng-model="ShowSmall" data-ng-change="visibleSmall()" />
Small Clock
</label>
<label class="checkbox-inline" style="margin-top: 7px;">
<input type="checkbox" id="chkMedium" name="medium" class="bgCheck" value="medium" data-ng-model="ShowMedium" data-ng-change="visibleMedium()" data-ng-init="ShowMedium=true" />
Medium Clock
</label>
<label class="checkbox-inline" style="margin-top: 7px;">
<input type="checkbox" id="chkBig" name="big" class="bgCheck" value="big" data-ng-model="ShowBig" data-ng-change="visibleBig()" />
Large Clock
</label>
<div data-ng-show="ShowSmall">
Small Clock
</div>
<div data-ng-show="ShowMedium">
Medium Clock
</div>
<div data-ng-show="ShowLarge">
Large... or Big Clock?
</div>
JS Fiddle
We can use ng-show and put a truthy / falsy value inside, so the DOM element with that attribute will be shown / hidden depending on that variable.
<div data-ng-show="ShowSmall && !ShowMedium && !ShowLarge">
Small Clock
</div>
When ShowSmall is true and the other two is false, that <div> will be shown. Try interact with the Fiddle to see if that fits your needs!
You may also want to checkout NgIf which instead of hiding, it removes the DOM element from the DOM tree.
Side note: If you only wants one to be shown, you may consider using radio buttons instead of checkboxes. JS Fiddle

How can I hide or remove the content outside the input field?

I'm trying to target the content and making the entire input fields hidden or disable specifically the field "Pickup in Store : $0.00".
I can only get the radio button to be hidden but not the text beside the radio button. I know the Labels are global containers but I can see the input fields has a unique ID. Is there a way we can accomplish this e.g. CSS, Javascript or Jquery?
<div class="shopping-basket-shipping-methods" data-shopping-basket-id="35838">
<label class="user-form-field-label">
<input class="shopping-basket-shipping-method" data-cart-id="411539" data-shopping-basket-id="35838" id="shopping_baskets_attributes_35838_shipping_method_id_932" name="shopping_baskets_attributes[35838][shipping_method_id]" type="radio" value="932">
Canada Post - Ground : $20.00
</label><br>
<label class="user-form-field-label">
<input checked="checked" class="shopping-basket-shipping-method" data-cart-id="411539" data-shopping-basket-id="35838" id="shopping_baskets_attributes_35838_shipping_method_id_915" name="shopping_baskets_attributes[35838][shipping_method_id]" type="radio" value="915">
<p>Pickup in Store : $0.00</p>
</label><br>
</div>
Personally I see three options;
Wrapping both elements in a single div and targeting them together (most straight foward)
Targeting the previous sibling as well (not difficult with css)
Assigning the label an equally descriptive and dynamic id for easier targeting (might require a bit of extra work)
You shouldn't use the label element to wrap the radio and the text.
<div class="form-control">
<label for="option1">Option 1 description</label>
<input type="radio" name="shopping" id="option1" value="option1">
</div>
<div class="form-control">
<label for="option2">Option 2 description</label>
<input type="radio" name="shopping" id="option2" value="option2">
</div>
If you want to relate some text to an input field you can simply add a label element as a sibling of the input element and relate them with the for attribute matching the input's id that's going the make the html structure more solid, you can also use an extra class or add an id for the form-controls div to make it easier to select or if you are already using jQuery you can target these elements parent with something like $('#option1').parent()
No need to hide all the label simply hide its content considering the ID of the input:
#shopping_baskets_attributes_35838_shipping_method_id_915,
#shopping_baskets_attributes_35838_shipping_method_id_915 + *{
display:none;
}
<div class="shopping-basket-shipping-methods" data-shopping-basket-id="35838">
<label class="user-form-field-label">
<input class="shopping-basket-shipping-method" data-cart-id="411539" data-shopping-basket-id="35838" id="shopping_baskets_attributes_35838_shipping_method_id_932" name="shopping_baskets_attributes[35838][shipping_method_id]" type="radio" value="932">
Canada Post - Ground : $20.00
</label><br>
<label class="user-form-field-label">
<input checked="checked" class="shopping-basket-shipping-method" data-cart-id="411539" data-shopping-basket-id="35838" id="shopping_baskets_attributes_35838_shipping_method_id_915" name="shopping_baskets_attributes[35838][shipping_method_id]" type="radio" value="915">
<p>Pickup in Store : $0.00</p>
</label><br>
</div>

Angular array and ng-repeat for ratio group

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.

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