I've got a few questions like 'what is something' and 4 radio buttons as answers. So it`s like 3 generated <ul>s in DOM. But the problem is, when I click some radio button, it selects the radio button in another question. How to fix this problem? Is it something with the value? Or it needs to have some unique index?
Code:
<ul *ngFor="let test of tests"> {{test.question.title}}
<li *ngFor="let answer of test.question.answers"> <input type="radio" [value]="answer" [(ngModel)]="radioSelected"> <label for="">{{answer}}</label> </li>
</ul>
<button (click)="check(radioSelected)">Send</button>
add name attribute base of index and create an answer object in the component
component
answers = {}; // 👈
template (view)
<ul *ngFor="let test of tests;let index = index"> {{test.question.title}}
<li *ngFor="let answer of test.question.answers">
<label >
<input [name]="index" type="radio" [value]="answer" [(ngModel)]="answers[index]">
{{answer}}</label>
</li>
</ul>
<button (click)="check(answers)">Send</button>
stackblitz demo 🚀🚀
You should have different ngModel for every test in ngFor, change your ngModel to
<input type="radio" [value]="answer" [(ngModel)]="test.question.radioSelected">
Related
I have used ssome of the Angular Material components and there is a property called [indeterminate] that I have serached on the web, but there is not a good explanations what exactly it does. So, could you tell me what it does in the following example?
<section class="example-section">
<mat-checkbox class="example-margin">Check me!</mat-checkbox>
<mat-checkbox class="example-margin" [disabled]="true">Disabled</mat-checkbox>
</section>
<section class="example-section">
<span class="example-list-section">
<mat-checkbox class="example-margin"
[checked]="allComplete"
[indeterminate]="someComplete()"
(change)="setAll($event.checked)">
{{task.name}}
</mat-checkbox>
</span>
<span class="example-list-section">
<ul>
<li *ngFor="let subtask of task.subtasks">
<mat-checkbox [(ngModel)]="subtask.completed"
[color]="subtask.color"
(ngModelChange)="updateAllComplete()">
{{subtask.name}}
</mat-checkbox>
</li>
</ul>
</span>
</section>
indeterminate means that the checkbox is neither checked nor unchecked, kind of the middle.
As you can see from the docs, it looks like this:
This is often used when for example, you have a list of stuff that can be checked/unchecked, and they are grouped with a parent (e.g. TreeView).
The parent will be checked if all its children are checked, unchecked if all its children are unchecked and indeterminate if some of its children are checked.
The docs also have an example of that:
(Backend developer trying to do some front end development here)
I have a simple HTML form with some text field inputs and a select menu. When the form is submitted I see the text field values hitting the web server but I don't see the value for the select menu hitting the server. The code for the select menu is:
<div class="mdc-select mdc-select--outlined mdc-select--with-leading-icon role-list">
<i class="material-icons mdc-select__icon" tabindex="0" role="button">work_outline</i>
<div class="mdc-select__anchor role-width-class">
<i class="mdc-select__dropdown-icon"></i>
<div id="role" class="mdc-select__selected-text" aria-labelledby="roles-select-label"></div>
<div class="mdc-notched-outline">
<div class="mdc-notched-outline__leading"></div>
<div class="mdc-notched-outline__notch">
<label id="roles-select-label" class="mdc-floating-label">Role</label>
</div>
<div class="mdc-notched-outline__trailing"></div>
</div>
</div>
<div class="mdc-select__menu mdc-menu mdc-menu-surface role">
<ul class="mdc-list">
<li class="mdc-list-item" data-value="0">
Painter
</li>
<li class="mdc-list-item" data-value="1">
Electrician
</li>
<li class="mdc-list-item" data-value="2">
Decorator
</li>
</ul>
</div>
</div>
The select menu is a material design component as described here.
The Javascript I have associated to this component is:
mdc.select.MDCSelect.attachTo(document.querySelector('.role-list'));
const role = new mdc.select.MDCSelect(document.querySelector('.role-list'));
role.listen('change', () => {
alert(`Selected option at index ${role.selectedIndex} with value "${role.value}"`);
});
A couple of questions I have straight off the bat:
Should I be using <li> instead of <option> - the code above follows the examples shown on the website.
Should there be a name attribute?
Create a hidden input:
<input type="hidden" name="my_select" id="my_select" value="">
Then store the value there:
mdc.select.MDCSelect.attachTo(document.querySelector('.role-list'));
const role = new mdc.select.MDCSelect(document.querySelector('.role-list'));
role.listen('change', () => {
document.getElementById('my_select').value = role.value;
});
There is a new update to this in material documentation in additional information section. It suggests doing the same thing that the accepted answer says but with no JavaScript.
Just wanted to put this out there for new people referring to this.
Select with hidden input (for HTML forms)
For convenient submission of Select's value in HTML forms, a hidden input
element may be added under the root element. The component will synchronize
its value with that of the hidden input.
<div class="mdc-select mdc-select--filled demo-width-class">
<div class="mdc-select__anchor">
<!-- Rest of component omitted for brevity -->
</div>
</div>
I am trying to select individual selection and in hidden a input checkbox in an un-ordered list.
Issue: When I click on one it selects all instead of one
I need just like checkbox in list with hidden input checkbox
here is my code shared in jsFiddle
<ul class="checkbox_list">
<li>
ravi
<p>2343534656 - U44BB387587</p>
<input type="checkbox" class="input_class_checkbox" id="c1">
</li>
<li>
arvi
<p>2343534656 - U444BB387587</p>
<input type="checkbox" class="input_class_checkbox" id="c2">
</li>
<li>
jiva
<p>2343534656 - 444BB387587</p>
<input type="checkbox" class="input_class_checkbox" id="c3">
</li>
</ul>
You need to use clicked element context this to target correct element:
$('.checkbox_list li').on('click',function(){
$(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'));
});
Working Demo
I am new with angularjs and struggling to make some logic for Showing and hiding different Div's using ng-show and ng-hide based on different click.
PLUNKER
View 1:
<div ng-hide="section1">
<select>
<option>Select List 1</option>
<option>Select List 2</option>
</select>
</div>
<div ng-hide="section1">
<ul>
<li ng-repeat="name in names">{{name.item}}</li>
</ul>
<button type="button" ng-click="section1=!section1">Edit</button>
</div>
Initially it shows a Dropdown, some list Item and Edit button
Clicking on Edit button Everything hides and shows View 2
View 2:
<div ng-show="section1">
<button type="button" ng-click="section2=!section2">+ Create New Item</button>
</div>
<div ng-show="section1">
<ul>
<li ng-repeat="name in names">
<input type="text" ng-model="name.item">
</li>
</ul>
<button type="button" ng-click="section1=!section1">Save</button>
</div>
On view 2 There is a button "Create New item" , List of Input fields with same value of view 1's list items and a save button.
This view 2 is basically edit mode of view 1.
Upto now works fine.
Problem: If I click "+Create new item", "View 2" Should Hide and "View 3" should Open.
View 3 Contains some blank input list and "Save button".Clicking on "save button" Hide "View 3" and again open "View 1".
View 3
<div ng-show="section2">
<ul>
<li ng-repeat="name in names">
<input type="text">
</li>
</ul>
<button type="button" ng-click="section2=!section2">Save New List</button>
</div>
I am struggling to manage 3 different view based on different button click with ng-show and Hide. It's not showing and hiding properly from clicking "+create new button".
Is this possible to make it work perfectly with ng-show & ng-hide only ?
Is there any better way to handle ?
Any help will be appreciated.
A better way to handle what you're trying to do is to have a variable that holds the index of the current section. Then, you could use something like ng-show="currentSection === 1" which I think would be a little more straight forward.
Then your click action could look more like ng-click="currentSection = 1". That will show all elements with ng-show="currentSection === 1".
Does that help any?
I have modified your plunker to fix your issue. You need to use both variable in ng-show
ng-show="section1 && !section2"
http://plnkr.co/edit/rdKIT4leGM9U7BNoE01B?p=preview
There are better ways to achieve what you are trying to achieve.
Try ng-switch for example
https://docs.angularjs.org/api/ng/directive/ngSwitch
So I have a list of notices in AngularJS which I create with ng-repeat. The notices have a visibility status which determines whether the notice is shown in the list. Every notice has controls which allow that notice to be hidden, a simple button that changes the notice.status.visibility to false.
I also have a checkbox input that is supposed to show hidden notices. However, I am unsure on how to implement this and how would it work.
Here's the HTML:
<ul>
<input type="checkbox" value="Show Hidden" />
<li ng-repeat="notice on notices | filter: filter.search">
<div ng-show="notice.status.visibility">
<!-- notice details -->
</div>
</li>
</ul>
Maybe with something like this:
<ul>
<input type="checkbox" value="Show Hidden" ng-model="showHidden" />
<li ng-repeat="notice on notices | filter: filter.search">
<div ng-show="showHidden || notice.status.visibility">
<!-- notice details -->
</div>
</li>
</ul>