There are two select, the second depends on the first:
<div class="form-group">
<label class="col-xs-12 col-sm-2 control-label">Тип ТС:</label>
<div class="col-xs-12 col-sm-10">
<select class="form-control " type="text" [(ngModel)]="item.TransportTypeId">
<option *ngFor='let type of transportTypes' [ngValue]='type.Id' [textContent]='type.Name'></option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-xs-12 col-sm-2 control-label">Подтип ТС:</label>
<div class="col-xs-12 col-sm-10">
<select class="form-control " type="text" [(ngModel)]="item.TransportSubTypeId" (ngModelChange)="show()">
<option [ngValue]="undefined">Не указано</option>
<option *ngFor="let subType of transportSubTypes | filterBy: ['TransportTypeId']: item.TransportTypeId" [ngValue]='subType.Id' [textContent]='subType.Name'></option>
</select>
</div>
</div>
It is assumed that the second select can be empty (undefined). At the initial time all works fine, both select have values, when the second ngModelChange changes, it works. But if I select any value in the first select, when the filter for the second select returns an empty array, then visually the second select is dropped to the value Not chosen (undefined), but the ngModel does not equal undefined.
For example:
item.TransportTypeId = 1;
item.TransportSubTypeId = 1;
change to:
item.TransportTypeId = 2;
The filterBy filter returns [], item.TransportSubType === 1, but the value Not chosen is selected and the ngModelChange event does not occur.
Help me figure out how to make it so that select automatically resets the value of the model.
You need to add component logic as well to understand the query in right direction. But by looking to your query change the code as per below
(ngModelChange)="show($event)"
//component
show(event) { this.val = event.value; }
Related
Select dropdown1 = new Select(driver.findElement(By.xpath("//html/body/div/div[2]/div/div/div//div//select")));
List<WebElement> drop1 = dropdown1.getAllSelectedOptions();
for(WebElement temp : drop1) {
String drop_text = temp.getText();
System.out.println(drop_text);
}
The above xpath represents 3 dropdown fields.When i execute this code i am getting the selected text in first dropdown only.What changes i need to do in this to get the selected options from all three dropdown fields.
**html code**
<div class="form-group">
<label class="control-label col-md-4 col-sm-4" for="type-select">Category<span style="color:red">*</span></label>
<div class="col-md-8 col-sm-8">
<select defaultattr="4" class="form-control input-style mandatory" data-val="true" data-val-number="The field CategoryID must be a number." id="CategoryID" name="CategoryID"><option value="">--Select--</option>
<option value="1">Architectural Firm</option>
<option value="2">Interior Design Firm</option>
<option value="3">General Contractor</option>
<option selected="selected" value="4">2tec2 Sales Network</option>
<option value="5">Cleaning Company</option>
<option value="6">Commercial end user</option>
</select>
<div class="form-group">
<label class="control-label col-md-4 col-sm-4" for="type-select">Company Status</label>
<div class="col-md-8 col-sm-8">
<select class="form-control input-style" id="ddlCompanyStatus">
<option selected="selected" value="1">Active</option>
<option value="0">Non Active</option>
</select>
</div>
</div>
<div class="form-group">
You can use css selector option:checked to get selected options
List<WebElement> selectedOpts = driver.findElements(
By.cssSelector("select.form-control > option:checked"));
for(WebElement temp : selectedOpts ) {
System.out.println(temp.getText());
}
First of all, calling findElement() only returns a single element from the HTML page. In order to get all elements that match a given selector, you need to call findElements() instead.
Secondly, you seem to be under the impression that getAllSelectedOptions() will return all of the options selected for all <select> fields. This is not the case. Instead, it only returns all of the selected options for a single <select> field. This only makes sense if you use the multiple attribute.
To get the selected option in each <select>, you first need to use findElements() instead of findElement(). Then you need to iterate over the selected elements and call getSelectedOption() on each one.
I have to show into a page the values of a matrix. Exactly I have a excel file mapped into matrix (ExcelField[][]) and the first row of this file is the label of the value of the below row (e.g. age heigh sex and th below row has the value 20 170 F).
Now I have to show the value near the label, three or four of this for any row of bootstrap page, like so:
The problem is the use of the matrix and the number of columns to show for any row. I think that it is impossible to use th:each as above image, it is possible to use for with variable as in java? Is there another way to make this?
Thanks
This is the code that I have written and tested, it works fine:
<div class="container">
<div th:each="j: ${#numbers.sequence(1, rowSize)}">
<div th:each="i: ${#numbers.sequence(0, colSize)}">
<div th:if="${i%3==0}">
<div class="row"></div>
</div>
<h3 th:if="${i==0 or i%3==0}">
<span class="label label-primary col-xs-1"
th:text="${excelSheet[0][i].value}"></span>
</h3>
<h3 th:if="${i!=0 and i%3!=0}">
<span class="label label-primary col-xs-1 col-xs-offset-1"
th:text="${excelSheet[0][i].value}"></span>
</h3>
<input class="km col-xs-2" name="distance" type="text"
th:value="${excelSheet[j][i].value}" />
</div>
</div>
</div>
I am creating a custom HTML to get input for the phone number. This is supposed to be a controls group with select box for phone type and a text box for the phone number. The layout needs to be different from what is done with build-in HTML helpers #select and #inputText. So my code looks as follows:
#phoneGroup(field: Field, className: String = "phone") = {
<div class="control-group">
<label class="control-label" for="#field("type").id">#Messages("company.phoneNumbers")</label>
<div class="controls">
<select id="#field("type").id" name="#field("type").name">
#options(models.PhoneType.options)
</select>
<input type="text" id="#field("number").id" name="#field("number").name" value="#field("number").value">
</div>
</div>
}
And I call it below in my template as follows:
#repeat(companyForm("phones"), min = 2) { phone =>
#phoneGroup(phone)
}
In the resulting HTML everything looks good so far except for the part that is generated by
#options(models.PhoneType.options)
Here's an HTML that is generated:
<div class="control-group">
<label class="control-label" for="phones_0__type">Phone numbers</label>
<div class="controls">
<select id="phones_0__type" name="phones[0].type">
(MAI,Main)(MOB,Mobile)(FAX,Fax)(CUS,Custom)
</select>
<input type="text" id="phones_0__number" name="phones[0].number" value="">
</div>
</div>
Apparently, #options just output string representation of the Map I am passing to it in models.PhoneType.options. So the question is, how do I use #options helper to generate the following HTML:
<option value="MAI">Main</option>
<option value="MOB">Mobile</option>
<option value="FAX">Fax</option>
<option value="CUS">Custom</option>
I am a Java programmer and I don't have any experience with Scala. It's probably a trivial thing but I didn't find any examples.
Thank you in advance.
- Dmitri
UPDATED 2013-11-07 - posted solution in the Answer section below
#options is just an object and doesn't handle outputting the HTML itself. That is done in the "select" helper where you pass in the options object. If you can't use #select, you could copy the relevant bits out of the source, https://github.com/playframework/playframework/blob/master/framework/src/play/src/main/scala/views/helper/select.scala.html.
Thank you for the clues, David. The reason I didn't use #select is because it also generates some formatting HTML around select tag and I wanted to have control over laying out components. Since I didn't figure out how to properly customize #select I went this road for now. OK, as you suggested I just copied the options Scala code and it did the trick:
<select id="#field("type").id" name="#field("type").name" class="input-small">
#options(models.PhoneType.options).map { v =>
<option value="#v._1"
#if(Some(v._1) == (field("type").value)) { selected }>#v._2</option>
}
</select>
The only catch, I had to use Some(v._1) as in inputRadioButtonGroup code ( https://github.com/playframework/playframework/blob/master/framework/src/play/src/main/scala/views/helper/inputRadioGroup.scala.html ), otherwise the comparison didn't work. I have to learn a little bit of scala to understand why is that :)
Or alternatively, the for loop works too, as follows:
<select id="#field("type").id" name="#field("type").name" class="input-small">
#for((value, text) <- models.PhoneType.options) {
<option value="#value"
#if(Some(value) == (field("type").value)) { selected }>#text</option>
}
</select>
I have the following query params:
http://localhost:8085/myPage?selectListId=2
I have peeled that "selectListId" param from the query string in my GET method and I want to set the selected item in my drop down list to that index value.
I'm using bootstrap so not sure if that matters. The list is populated from a viewModel that I pass in from my spring mvc3 controller.
<form class="form-horizontal" action="myController/indexSubmit" method="post">
<select name="selectList" class="form-control" placeholder=".input-medium" height>
<c:forEach items="${viewModel.getlistitems()}" var="item" varStatus="count">
<option value="${count.index}">${item }</option>
</c:forEach>
</select>
<button type="submit" class="btn btn-primary btn-medium">Submit</button>
</form>
How can I set this value (not using javascript preferably)? Thanks!
Using the id like that is a bad idea because it's not a true identifier, it's just the current index. For the answer's sake, given a controller method that handles your form submission
#RequestMapping(/* some mapping */
public String saveSelection(#RequestParam("selectList") String selectListId, Model model) {
model.addAttribute("selectListId", selectList);
return "form"; // whatever it is
}
you compare the current index to the index in the request attributes and set it selected if they match
<form class="form-horizontal" action="myController/indexSubmit" method="post">
<select name="selectList" class="form-control" placeholder=".input-medium" height>
<c:forEach items="${viewModel.getlistitems()}" var="item" varStatus="count">
<option value="${count.index}" ${not empty selectListId && selectListId == count.index ? 'selected' : ''} >${item }</option>
</c:forEach>
</select>
<button type="submit" class="btn btn-primary btn-medium">Submit</button>
</form>
I'm trying to render a few radiobuttons in a Struts2 web application.
The value of each radiobutton is an integer and its associated label should be an i18n text, which varies as a function of the value. The i18n keys have the form Common.eventTypeId.<<integer value>>, (e.g. Common.eventTypeId.28, Common.eventTypeId.29, etc).
However when I access the page the labels don't get translated as there are wrong keys: Common.eventTypeId.null. What puzzles me is that the same variable used to build the i18n key renders ok as the value of the radio button.
Here is the snippet where the HTML code is generated. eventTypeIds is a List<Integer> containing 3 elements: 28, 29 and 31.
<s:iterator value="eventTypeIds" var="eTypeId">
<div class="frm-field">
<s:set var="label" value="%{getText('Common.eventTypeId.' + eTypeId )}"/>
<s:radio name="currentActivity.eventTypeId" list="eTypeId" listValue="label"/>
</div>
</s:iterator>
The relevant i18n keys:
Common.eventTypeId.29 = CAA
Common.eventTypeId.28 = Practical
Common.eventTypeId.31 = Non-assessable activity
This is the actual HTML being generated right now:
<div class="frm-field">
<input type="radio" value="29" checked="checked" id="frm-activity_currentActivity_eventTypeId29" name="currentActivity.eventTypeId">
<label for="frm-activity_currentActivity_eventTypeId29">Common.eventTypeId.null</label>
</div>
<div class="frm-field">
<input type="radio" value="28" id="frm-activity_currentActivity_eventTypeId28" name="currentActivity.eventTypeId">
<label for="frm-activity_currentActivity_eventTypeId28">Common.eventTypeId.null</label>
</div>
<div class="frm-field">
<input type="radio" value="31" id="frm-activity_currentActivity_eventTypeId31" name="currentActivity.eventTypeId">
<label for="frm-activity_currentActivity_eventTypeId31">Common.eventTypeId.null</label>
</div>
This would be the expected HTML:
<div class="frm-field">
<input type="radio" value="29" checked="checked" id="frm-activity_currentActivity_eventTypeId29" name="currentActivity.eventTypeId">
<label for="frm-activity_currentActivity_eventTypeId29">CAA</label>
</div>
<div class="frm-field">
<input type="radio" value="28" id="frm-activity_currentActivity_eventTypeId28" name="currentActivity.eventTypeId">
<label for="frm-activity_currentActivity_eventTypeId28">Practical</label>
</div>
<div class="frm-field">
<input type="radio" value="31" id="frm-activity_currentActivity_eventTypeId31" name="currentActivity.eventTypeId">
<label for="frm-activity_currentActivity_eventTypeId31">Non-assessable activity</label>
</div>
Note that the integer values are being correctly displayed using eTypeId variable, but that variable is null when building the i18n key. What am I missing? Did I misunderstand the s:radio tag usage?
You are missing # before using eTypeId var inside <s:set> tag.
<s:set var="label" value="%{getText('Common.eventTypeId.' + #eTypeId )}"/>
BTW <s:radio> takes iterable source in list attribute, so you can use your eventTypeIds list inside radio tag and get translated text with listValue attribute and top keyword.
<s:radio name="currentActivity.eventTypeId" list="eventTypeIds"
listValue="%{getText('Common.eventTypeId.' + top)}"/>