I need a select option in angular 4, but data binding doesn´t work.
I have a function "ChangeTable" in (ngModelchange) but the parameter always that i send in the function is "undefined".
I have tried to went $event.target.value but it also go "undefined"
this is my code html
<select [(ngModel)]="selectTable" (ngModelChange)="ChangeTable($event)" >
<option>Select item</option>
<option *ngFor="let table of tables" [value]="table.id">
{{table.Description}}
</option>
</select>
this is my code in component
ChangeTable(ev:any){
var tabla=this.selectTabla;
}
You can help me, please.thanks
ngModelChange itself extracts the value from $event so you no more need to do $event.target.value. In your case there must be no id exist in table object that's may be the reason you are getting undefined whenever your binding value property with table's id([value]=table.id).
Check your table's data once and you can also refer this stackblitz link where I've demonstrated your use-case.
Related
Here's what I'm trying to accomplish.
<select (ngModelChange)="addChild($event)">
<option>Add</option>
<option [value]="null">New Item</option>
<option *ngFor="let child of menuItem.children" [value]="child">
{{child.title}}
</option>
</select>
While it compiles, the addChild method is not called. VSCode is reporting that "The bound output ngModelChange does not exist on any directive or on the element" - so what directive do I need to add?
Try changing your first line to:
<select (change)="addChild($event)">
That should do the job.
You may also find convenient to print strings instead of full objects where it is expected:
<option *ngFor="let child of menuItem.children" [value]="child.id">
and maybe (or maybe not):
<select (ngModelChange)="addChild(child.id)">
if it works better for you and you have a suitable property, of course. YMMV.
AngularDart's SelectElement only supports Strings for values. If you want to pass arbitrary objects, you will need to use a different component - one that supports such functionality.
I have seen some other posts using below format but it did not work at all, even the select is not opening:
.click(".selectpicker option[value='somevalue']")
But when I wrote like this:
.click("select[id='chooseone']")
it did open the dropdown.
This is how select looks like:
<select class="selectpicker btn dropdown-toggle btn-default" title="Choose one of the following..." id="chooseone" style="">
<option value="chooseone" style="">Choose one</option>
<option value="value1" style="">option 1</option>
<option value="value2" style="">option 2</option>
<option value="value3">option 3</option>
</select>
There is react code in backend, so an onchange event is fired which will display appropriate input field per option and a submit button.
My test is basically:
select an option
fill fields
submit
validate result container
How should I write this code? This is my first time in such thing. Any help is appreciated.
Thanks
UPDATE >>>
This was in Safari and it did not work. But when I installed chromedriver, it did work. Here is the working code:
.click('select[id="searchBySelect"] option[value="any_option_value"]')
This will click the provided option in the select element.
First you need to open the dropdown menu. It looks like you already know this but in any case you would start with:
browser.click('.selectpicker');
Then there are a couple of ways you can get the option you want to click. You can choose a specific option by doing something like this (just modify it to select whichever option you want)
browser.element('css selector', '.selectpicker', function(element) {
browser.elementIdElement(element.value.ELEMENT, 'css selector', 'option[value="value1"]', function(option) {
browser.elementIdClick(option.ELEMENT);
});
});
Or you could get all of the options in an array and click on one of them this way:
browser.elements('css selector', 'option', function(elements) {
browser.elementIdClick(elements.value[0].ELEMENT); //can use any index here as long as you know which one you are looking for
});
tehbeardedone thanks so much for providing your solution. I had to do a small fix to get the elementIdClick() working.
Instead of option.ELEMENT
I had to use option.value.ELEMENT
Since my code snippet had to be added to a page object, this is its final version:
let durationOptionSelector = `option[contains(text(), "${duration}")]`; //dynamic option selector
this.click("#duration_dropdown");
this.api.element("xpath", "#duration_dropdown", function (dropdown) {
this.elementIdElement(dropdown.value.ELEMENT, "xpath", durationOptionSelector, function(option) {
this.elementIdClick(option.value.ELEMENT);
});
});
How can i call a method when the value is changed using Angular 2?
<select [(ngModel)]="searchMonster">
<option>36</option>
<option>37</option>
</select>
I tried to use ng-change but had no success.
Use ngModelChange. check the template syntax docs.
try this
<select
[ngModel]="searchMonster"
(ngModelChange)="yourMethod($event)">
<option>36</option>
<option>37</option>
</select>
an alternative worked with me for <input> tag, try this for <select>
<select #option
[ngModel]="searchMonster"
(ngModelChange)="yourMethod(option.value)">
<option>36</option>
<option>37</option>
</select>
Basically upto my observations [(ngModel)] is called when we have to use two way data Binding in angular. so view and controller/method is called via binding. we can use [(ngModel)] as [ngModel] and (ngModelChange) for change detection but in This case onChange() gets called twice for each select list change that way according to this answer here but as you want to call a method on change you can use this way here:-
<select [(ngModel)]="selectedDevice" #device (change)="onChange(device.value)">
<option *ngFor="#i of devices">{{i}}</option>
</select>
onChange(deviceValue) {
console.log(deviceValue);
}
i found best answer to this question is this
I'm using a series of select elements on a form within an MVC5 view, initialised with the jQuery Chosen plugin. The plugin looks as it should and saves the selected option back to the model successfully. However if any other element on the page fails validation and the page is reloaded, the select elements are back to their original state and the selected option is no longer shown. How can I get the select list to retain its selected option following a reload?
<select class="chosen" id="SE_Visit1" name="#Html.NameFor(model => model.SE_Visit1)">
<option value=""></option>
<option value="0">0 (25)</option>
<option value="1">1 (23)</option>
<option value="2">2 (37)</option>
<option value="3">3 (34)</option>
<option value="4">4 (12)</option>
</select>
$(document).ready(function () {
// initialise the Chosen plugin on the select lists
$('.chosen').chosen({ placeholder_text_single: "Select visit...", width: "75px" });
});
I've tried to add a change event handler on the element to save the selected value which could be used to assign the value again after reload but this just seems to break the page. Any help much appreciated since this particular form has 20 select elements so a lot of values for the user to have to complete more than once.
In my struts2 action that prepares the ftl page i have
private static List<Product> listOfProducts;
with getter and setters. This list is filled with products. First product in the list has type B.
In ftl page I am iterating over the list of products
<#list listOfProducts as product>
<select name = product[0].type>
<option value="A">fistType</option>
<option value="B">secondType</option>
<option value="C">thirdType</option>
</select>
</#list>
Problem is that firstType is preselected each time even if in the list i have a product with type B.
Can you tell me what am i missing here? Why option B was not selected when the ftl is loaded?
Thanks
See http://www.w3schools.com/tags/tag_select.asp on the correct syntax for a select
The attribute "name" sets the name of the control - it does not influence the selection
See How can I set the default value for an HTML <select> element?
on how to do that
Use Struts select tag.
<#s.select theme="simple" name="selectedProduct" list="listOfProducts" listKey="productId" listValue="productName" value="defaultProduct"/>
Please go through the example in below link for more understanding.
http://www.mkyong.com/struts2/struts-2-sselect-drop-down-box-example/