I want to use a mat-list-option to checked or unchecked a group of mat-list-options but i can't check that the mat-list-option is checked or not with $event.
You could also assign a template reference to the mat-list-option and check if it is selected
TemplateRef: #option then use option.selected
<mat-selection-list #shoes>
<mat-list-option #option *ngFor="let shoe of typesOfShoes">
{{shoe}} <div style="font-weight:bold">{{option.selected}}</div>
</mat-list-option>
</mat-selection-list>
Stackblitz
https://stackblitz.com/edit/angular-gl4wqq?embed=1&file=app/list-selection-example.html
<mat-list-option (click)="selectGroup($event.toElement.getAttribute('ng-reflect-state'))">
</mat-list-option>
ng-reflect-state keep an string value that show mat-list-option status, the value may be "checked" or "unchecked".
Related
I have a material group dropdown designed just like the official documentation (here).
Question is : How can I display the selected item text along with group name.
ie; If I select Bulbasaur from 'Grass' group, as in the image, it should show 'Grass - Bulbasaur' instead of just 'Bulbasaur'. Any ideas?
Update: I have found a work around. Anyone fiddling around with the same issue can do this css hack in the mean time,
<mat-form-field>
<mat-select placeholder="Pokemon" [formControl]="pokemonControl">
<mat-option>-- None --</mat-option>
<mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
[disabled]="group.disabled">
<mat-option *ngFor="let pokemon of group.pokemon" [value]="pokemon.value">
<span style=display:none">{{group.name}} -</span>{{ pokemon.viewValue }}
</mat-option>
</mat-optgroup>
</mat-select>
</mat-form-field>
It looks like the proper way to do this is to set "custom trigger text":
See the examples for the MatSelect instead of the overview
So you would do something like this:
<mat-form-field>
<mat-select placeholder="Pokemon" [formControl]="pokemonControl">
<mat-select-trigger *ngIf="pokemonControl.value; let pokemon">
{{ pokemon.parentViewValue }} : {{ pokemon.viewValue }}
</mat-select-trigger>
<mat-option>-- None --</mat-option>
<mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
[disabled]="group.disabled">
<mat-option *ngFor="let pokemon of group.pokemon" [value]="pokemon">
{{pokemon.viewValue}}
</mat-option>
</mat-optgroup>
</mat-select>
</mat-form-field>
Take note of two things:
Obviously the mat-select-trigger tag... I am using the full pokemon model, you will need to add either a reference to the parent group or, like I have done, add the parent view value in each pokemon. You can do either when you actually construct the model
My [value] for the mat-option tag is pokemon instead of pokemon.value as I need the full model
I am looking for a way to check what radio is selected and save the value of that option into a variable.
once i have the variable i want to build a switch statement which will give me the logic to decide what to do.
here is the HTML:
<input type="radio" value="option_1" name="registration[registrationType]" id="option_1_id" class="radio">
(Option 1)
<input type="radio" value="option_2" name="registration[registrationType]" id="option_2_id" class="radio">
(Option 2)
<input type="radio" value="option_3" name="registration[registrationType]" id="option_3_id" class="radio" checked="checked">
(Option 3)
option 3 is the checked option (checked="checked")
I want to extract the value of option 3 (option_3) and save it in a variable
default_option = #the code that extracts the default option
case default_option
when "option_1"
puts 'lets do something with this'
when "option_2"
puts 'lets do something with this'
when "option_3"
puts 'lets do something with this'
else
puts 'cant do much with this'
end
Thanks in advance!
Since you want the value of the checked radio in a group of them you want to use the shared name and the checked filter
find(:radio_button, 'registration[registrationType]', checked: true).value
In the case the 'option_3_id` is checked, you can find its value by
find(:radio_button, 'option_3_id', checked: true).value
But as you don't know which radio button is checked, you should first find all the options and verify which one is currently checked (checked:true/false), and then retrieve its value.
How do I get the name of the class, in this case it is 84
<div style="width: 50%;" data-test="84" class="test"></div>
So I want the contents of the data-test attribute
Given:
<div style="width: 50%;" data-test="84" class="test"></div>
If you want the value of the data-test attribute, you could use:
/div/#data-test
Or, if you're specifically looking for something with class equal to test:
/div[#class="test"]/#data-test
Or, if you want the value of the data-test attribute for anything containing a data-test attribute:
//*[#data-test]/#data-test
And if none of these help, you may want to update your question to give us a better idea of what you're looking for.
I want to get the value of the selected option from a dropdown list, in D3.js.
<select>
<option data-graph="1">1</option>
<option value="2">2</option>
</select>
I have seen this question which explains how to get the value when the select changes:
d3.select("#myselect").on("change", change)
function change() {
this.options[this.selectedIndex].value
}
But how can I get the selected value on page load, not when the select is changed?
I found this to be the simplest:
d3.select("#objectID").node().value;
Which is the text of the selected option in the following node: <select id="objectID"></select>
Note that d3.node() is documented at https://github.com/mbostock/d3/wiki/Selections#node and the .value property of an HTMLInputElement is documented on MDN at https://developer.mozilla.org/en/docs/Web/API/HTMLInputElement.
Use the .property() method:
d3.select("#objectID").property("value")
You don't need to use D3 to do that:
var sel = document.getElementById('myselect');
console.log(sel.options[sel.selectedIndex].value)
I've also seen
d3.select("#objectID")[0][0].value
But I'm quite sure this is generally a bad idea...
I tried to check whether date widget is empty. If it is empty, it shouldn't show up.
<div class="field"
tal:define="value widget/value;
valueexists python:value not in (None, '',);
label widget/label"
tal:condition="python:widget.__name__ not in ('IBasic.title', 'IBasic.description', 'title', 'description',) and valueexists">
Problem is the below expression doesn't seem able to check for date:
python:value not in (None, '',)
Why not something like:
<div class="field"
tal:define="value widget/value;
label widget/label"
tal:condition="python:widget.__name__ not in ('IBasic.title', 'IBasic.description',
'title', 'description',) and value">
...
</div>
Testing for specific values of widget/value seems destined to cause trouble.
I'm not sure I understood your question correctly, but I'd also like to suggest jQuery as a way to check and conditionally hide (remove) a widget, if it's for aesthetic reasons.