I have this piece of code, but the option value is not concatenating {item.id}-${driver.id} and instead I got "-2"
<tr th:each="item: ${devices}" >
<td class="col_id" th:text="${item.id}" ></td><!-- ID -->
<td class="col_name" th:text="${item.description}"></td><!-- NAME -->
<td class="col_name" th:if="${#authorization.expression('hasRole(''ROLE_ADMIN'')')}" th:text="${item.application.name}"></td><!-- NAME -->
<td class="col_name" >
<select id="selectAuthorizedDriverId" >
<!-- option value="0">Please select the driver</option-->
<option th:each="driver : ${drivers}"
th:value="${item.id}-${driver.id}"
th:text="${driver.firstName}"
th:selected="${driver.id==item.driverDevices[0].driver.id}">
</option>
</select>
Thymeleaf is able to do mathematical operations, in your case:
th:value="${item.id}-${driver.id}"
will generate a single result from two integers.
Try
th:value="|${item.id}-${driver.id}|"
instead as this should make sure the given values are concatenated.
Related
I am using Angular.
I have a table with two columns. Each cell of 1st column is a series number. Each cell of second column is a drop down of serial numbers. I am binding to a data source in my component and it is working fine.
My data source is a simple hard coded array in my component (I have as many elements as I like, here I show only one):
toolSeries = {
"Series": "12345678A",
"Serials" : ["123321", "123321", "54654", "357", "386758"],
}
and my binding is like so:
<tr *ngFor='let tools of toolSeries' height="50px">
<td class="tableEntryText">{{tools.Series}}</td>
<td class="tableEntryText">
<select class="noBorder additionalSelectStyle" name="filter_for" (change)="OnSerialChanged($event.target)">
<option *ngFor = 'let serial of tools.Serials'>
{{serial}}
</option>
</select>
</td>
<tr>
All good, works fine.
Now I need to add the following: each Tool Serial can have a "state". So I modify my data structure like so:
toolSeries = [
{
"Series": "12345678A",
"Serials" : ["199921", "123321", "54654", "357", "386758"],
"State": ["OK","BAD","BAD","UNKNOWN", "OK"]
},
So, I add another column to my HTML table and now my code becomes:
<tr *ngFor='let tools of toolSeries' height="50px">
<td class="tableEntryText">{{tools.Series}}</td>
<td class="tableEntryText">
<select class="noBorder additionalSelectStyle" name="filter_for" (change)="OnSerialChanged($event.target)">
<option *ngFor = 'let serial of tools.Serials'>
{{serial}}
</option>
</select>
</td>
<td class="tableEntryText">
<label class="labelAdjust">{{series.State[0]}}</label>
</td>
</tr>
Now as it stands, {{series.State[0]}} will mean that the the new field always shows the value of the first state for each serial.
Question: How should I write the binding so that the State of the field will reflect the state of the Serial selected in the drop down? So for example, when the user selects "123321" from the dropdown my new column's cell should show "BAD" instead of "OK".
Thanks for any help.
There are some other considerations here but the quick and dirty way to do what you want is this,
<select [(ngModel)]="selectedValue" class="noBorder additionalSelectStyle" name="filter_for" (change)="OnSerialChanged($event.target)">
<option *ngFor = 'let serial of tools.Serials' [ngValue]="serial">
{{serial}}
</option>
</select>
<td class="tableEntryText">
<label class="labelAdjust">{{tools.State[tools.Serials.indexOf(selectedValue)]}}</label>
</td>
You have to bind a value to your select so that you know what the selected option is and then you need to find the index of that value in the tools.Serials array and use that index in tools.State to get the corresponding state. You will also need to declare the selectedValue variable in your .ts file,
public selectedValue: number;
Keep in mind this assumes that tools.Serials and tools.State have the same number of elements. If they ever become out of sync you will likely have errors.
The better solution is likely to rethink your data structure and associate the states with their serials in a more direct way.
Stackblitz
My approach is quite similar to #DKidwell answer here, but instead of saving and looking up the value of selected tool.serial. I'm saving the index of selected tool.serial in ngModel & retrieving the tool.State value on same index if exists else there is no error and no value in tool.State.
So, even if the length of these arrays mismatched your code will work, but still probably its a good idea to rethink your data structure if this is going to be get more complex.
<select class="noBorder additionalSelectStyle" name="filter_for" [(ngModel)]="selectedSerial">
<option value="" disabled>Select a serial</option>
<option *ngFor = 'let serial of tools?.Serials; let i = index' [value]="i">
{{serial}}
</option>
</select>
</td>
<td class="tableEntryText">
<label class="labelAdjust">{{(tools?.State[selectedSerial]) || ''}} </label>
</td>
</tr>
Thank you both very much for taking the time to answer, I very much appreciate it. Your answers taught me a lot. In the end I did indeed change the data structure to one which enabled me to use less data-binding code.
I need to configure one of the columns in my smart-table to be a dropdown. The possible values for the 'Status' column are OK and PENDING. (These values are retrieved from a rest api) I am looking to initialize the value in the dropdown to OK/PENDING based on the value retrieved from the api.
I posted what I've tried so far,the status are all set to OK regardless of the actual value.
I'm just starting out with smart-table and javascript so any help is appreciated.
For reference, here is a sample json object being returned from my rest api (other fields removed):
[
{
comments: [
{
comment: "Test comment",
userId: "test_user",
timestamp: 1473282222280
}
],
status: "PENDING"
}]
Here is the smart-table html code:
<tbody>
<tr ng-repeat="row in rowCollection" ng-class="{danger: (row.status=='PENDING'),success:(row.status=='OK')}">
<td cs-select="row"></td>
<td align="center">
<select st-search="status">
<option value="">OK</option>
<option value="">PENDING</option>
<!-- <option ng-repeat="row in rowCollection | unique:'status'" value="{{row.status}}">{{row.status}}</option> -->
</select></td>
<td align="center">{{row.comments[0].comment}}</td>
</tbody>
and a screenshot of the table:
You can try with the ng-selected directive in this way:
<select>
<option ng-selected="row.status == 'PENDING'">PENDING</option>
<option ng-selected="row.status == 'OK'">OK</option>
</select>
I am using an ng-repeat to generate some data (username, login, role and actions). Each dropdown (role) has the same list of options.
Expected output :
Each row of data can have a different selected option (like the image) and a service call is made whenever a change is made to save the change.
My problem is that I can't choose different options for each row. Because they are all bound to the same ng-model, they all detect the change and all change to the new option.
<table>
<thead>
<tr>
<th>Name</th>
<th>Username</th>
<th>Role</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="participant in model.participantData">
<td>{{participant.DisplayName}}</td>
<td>{{participant.UserLogin}}</td>
<td>
<label for="{{participant.ParticipantID}}" class="sr-only">
Choose a role
</label>
<select id="{{participant.ParticipantID}}" data-ng-options="role.RoleID as role.RoleName for role in model.rolesData" data-ng-change="roleChanged(participant)" data-ng-model="model.chosenRole">
</select>
</td>
<td>
<span aria-hidden="true" class="fa fa-minus-circle clickable"</span>
<span class="sr-only">Delete group member</span>
</td>
</tr>
</tbody>
</table>
Instead of giving same model , Give them model by ng-repeat instance
Like this
data-ng-model="participant.chosenRole"
Select will be
<select
id="{{participant.ParticipantID}}"
data-ng-options="role.RoleID as role.RoleName for role in model.rolesData"
data-ng-change="roleChanged(participant)"
data-ng-model="participant.chosenRole">
</select>
You can get selected value of each row from model.participantData
I know Regular Expression is not right track to do this parsing job but it is recommended from my side.
If i have a HTML this below. I want to parse all the select info from html table. For this i have used
<table id='options_table'>\s*?(.+)?\s*?</table>
But this above giving me null result.
and then to parse all select returned from above regex i will use
<SELECT.*?>(.*?)<\/SELECT>
But above both getting null result.
What should be the regex for Table and Select (from parsed table html) ?
HTML Part
<table id='options_table'>
<tr><td colspan=3><font size="3" class="colors_productname">
<i><b>Color</b></i>
</font>
<br /><table cellpadding="0" cellspacing="0" border="0"><tr><td><img class="vCSS_img_line_group_features" src="/v/vspfiles/templates/192/images/Line_Group_Features.gif" /></td></tr></table>
</font></td></tr>
<tr>
<td align="right" vAlign="top">
<img src="/v/vspfiles/templates/192/images/clear1x1.gif" width="1" height="4" border="0"><br />
</td><td></td><td>
<SELECT name="SELECT___S15FTAN01___29" onChange="change_option('SELECT___S15FTAN01___29',this.options[this.selectedIndex].value)">
<OPTION value="176" >Ivory/Grey</OPTION>
</SELECT>
</td></tr>
<tr>
<td align="right" vAlign="top">
<img src="/v/vspfiles/templates/192/images/clear1x1.gif" width="1" height="4" border="0"><br />
</td><td></td><td>
<SELECT name="SELECT___S15FTAN01___31" onChange="change_option('SELECT___S15FTAN01___31',this.options[this.selectedIndex].value)">
<OPTION value="167" >0/3 months</OPTION>
<OPTION value="169" >3/6 months</OPTION>
<OPTION value="175" >6/9 months</OPTION>
</SELECT>
</td></tr>
</table>
I don't know, GoLang, but I can tell you in perl, and I think you will be able to relate to GoLang.
Firstly, regex to store table tag content (https://regex101.com/r/tL7dA0/1):
$table = $1 if ($html =~ m/<table.*?>(.*)<\/table>/igs);
Regex for printing all the things between select tag (https://regex101.com/r/xJ0xU1/1):
while ($table =~ m/<select.*?>(.*?)<\/select>/isg){
print $1."\n";
}
As in your case, if html table contains inner table, then all the content of outer table would be selected.
i modifier: insensitive. Case insensitive match (ignores case of [a-zA-Z])
s modifier: single line. Dot matches newline characters
g modifier: global. All matches (don't return on first match)
I'm doing some bug-fix on a legacy project which was developed using Struts2 and JSTL. I have an issue with the multiple select below:
<tr class="itemTr">
<td class="formLabel"><span class="spamFormLabel">Tags </span>
</td>
<td class="formField"><html:select property="tags"
styleId="tags"
styleClass="baseField" size="1" multiple="true"
style="height:170">
<html:options property="tagsList"
labelProperty="tagsLabelList" styleClass="baseOptions" />
</html:select>
</td>
</tr>
When i request the values on the action class
request.getParameter("tags");
is just returning the first value I selected. My objective is to return all of them, of course...lol
String parreco[] = request.getParameterValues("tags");
Using this method I can use all the selected values