Angular2 template Print variable value without binding it - angular2-template

i'm trying to print a variable value without binding it with the binding syntax {{}}, because in my case i'm having an editable input and a second input of the default value, each time i edit the input the defaut value input change also with the syntax :
<tr>
<td>description</td>
<td contenteditable='true' (input)="onRowClick($event, 'description', i)">{{ row.description }}</td>
<td>{{row.description}}</td> <<==== default value must not change when editing the first one
</tr>
So i need in the case of the default value input just print the value without binding it

Related

Change a cell color based on value - VueJs & Vuetify

I'm gathering datas from a JSON file. I would like to change the cell color to green if the value is "OK" and to red if the value is "KO". I'm using a v-simple-table like that :
<td :class="OK? 'primary' : 'accent'">{{ item.pcb1 }}</td>
With my actual solution, my entire column is green.
Do someone have any idea how to to it properly ?
Thank you
It seems you intend to test the value of item.pcb1 in the class conditional. Right now it's always true because it tests the literal string "OK", and any string with a value is truthy.
<td :class="item.pcb1 === 'OK' ? 'primary' : 'accent'">{{ item.pcb1 }}</td>
This way tests the value of item.pcb1 instead of a literal string.

How to display details after clicking on table's cell filled by v-for?

I have a component which displays the list of 'matches' and after click on particular cell it should show the concrete information about it (with help of child's function passData(value)). The data is displayed via v-for in a table:
...
<tr v-for="(value,key) in matches" v-bind:key="(value,key)">
<td v-on:click="passData(value)">{{value.match_id}}</td>
<td>{{value.duration}}</td>
<td>{{value.start_time}}</td>
...
<match ref="match"></match>
</tr>
...
So result what I want to achive should be like this:
when a user clikcs on a match it displays a 'card' with some info about it and if the user clicks on it again it hides.
To make it clear all components are working correctly. The problem is that I can't intgrate it into the v-for method. I just need to display a 'card' on the needed place. How can I do this?
What I am having now:
what you can do is something like this to show details of each row next to it if needed
<template v-for="(value,key) in matches">
<tr v-bind:key="(value,key)">
<td v-on:click="toggleData(value)">{{value.match_id}}</td>
<td>{{value.duration}}</td>
<td>{{value.start_time}}</td>
...
<match ref="match"></match>
</tr>
<tr v-bind:key="`${key}_details`" v-if="details[value.match_id]">
... show whatever you want
</tr>
</template>
and in toggleData(value)
if not present add it else remove it
this.details[value.match_id] = value // if single
this.details[value.match_id] = [] // OR if multiple
this.details[value.match_id].push(value)

How to set string date in store to date textbox inside a dojo grid

I have a date textbox inside dojo grid
<th data-dgrid-column="dgrid.editor({ field:'START_DATE',editorArgs{style:'width:12em;',required:true,missingMessage:'Please enter Start date'},autoSave:true}, dijit.form.DateTextBox ) "> Start Date</th>
But my store has string value of date, so the date is not displayed in the datetextbox, how to fix this
You can use the get method of the Column to achieve this
function convertToDate(dateString){
return new Date(dateString);
}
<th data-dgrid-column="dgrid.editor({
field:'START_DATE',
editorArgs{style:'width:12em;', required:true, missingMessage:'Please enter Start date'},
autoSave:true,
get:convertToDate }, dijit.form.DateTextBox )"> Start Date</th>

Thymeleaf calling method on object

Is it possible to call a method on an object in an "each" loop in Thymeleaf? I'm trying to create a dynamic table where both rows and columns can be dynamic. A Table have a list of Rows and a list of Columns. Column have a method getValue that for a given Row can get the value. But I'm not able to call this getValue(Row row) from Thymeleaf.
I have this Thymeleaf code:
<table>
<tr th:each="row : ${table.rows}">
<td th:each="column : ${table.columns}">
<span th:text="${column.value(row)}"/>
</td>
</tr>
</table>
This causes an exception:
Exception evaluating SpringEL expression: "column.value(row)"
Is it even possible to do this in Thymeleaf, e.g. pass variables to methods on other variables?
I found the problem, since I'm passing in something to this method it's not a getter method so I have to provide the full method name: getValue not just value:
<table>
<tr th:each="row : ${table.rows}">
<td th:each="column : ${table.columns}">
<span th:text="${column.getValue(row)}"/>
</td>
</tr>
</table>

Element is no longer attached to the Dom error for link

I try to get a href from an anchor according to linkText given with func param (for example here Westwood or Linda).
In the code below I changed classes values (cause of company info), but beside thats the code. For each <tr> the hrefs are identical for both <td>, but different from <tr> to <tr>
I get the 1st href with:
driver.findElemnt(By.xpath("//a[#class = 'class Name of a']").getAttribute("href")
or the same with:
xpath="//a[#class = 'class Name of a'][1]";
but when I go:
"//a[#class = 'class Name of a'][2]" or 3 or 4...
or when I use:
By.partialLinkText
It fails, so I never get beyond the 1st <td> of the first <tr>.
The Error: oopenqa.selenium.StaleElementReferenceException : Element
is no longer attached to the Dom.
The Elements are visible all the time, so its not a visibility problem.
This is the html:
<tr class="Class name for tr here">
<td headers="description _ CustomerList:lastName">
Westwood
</td>
<td headers="description _CustomerList:firstName">
Linda
</td>
</tr>
You're trying to retrieve the second anchor tag within the same parent (in the example document: table cells).
Instead of
//a[#class = 'class Name of a'][2]
query the second anchor tag in the whole document:
(//a[#class = 'class Name of a'])[2]
Some more examples how to use positional predicates (I omitted the class predicate here):
Anchor tags from all second table cells per row:
//td[2]/a
Second anchor tag per row:
//tr//a[2]