I am trying to hide an input field if the td doesn't have a value.
I know we can have a condtition like this:
${condition ? true : false}
but how can I have an inline operator like this?
${condition ? true : false && false}
Example:
${JsonObject ? JsonObject.Description : " " && $('#textbox').removeattr("style").hide()}
The html is similar to this:
`<td>
${JsonObject ? JsonObject.Description : " " && $('#textbox').removeattr("style").hide()}
</td>
`<div><input id="textbox"></div>
If I'm understanding you right, you want the truthy result to be the description, and the falsy result to be " " and to have the side-effect of removing the style attribute from #textbox and hiding it.
I strongly recommend not doing that. Side-effects like that are extremely hard to debug and maintain.
But if you really want to, make the side-effect first:
`<td>
${JsonObject ? JsonObject.Description : $('#textbox').removeattr("style").hide() && " "}
</td>
`<div><input id="textbox"></div>
That works because hide returns the jQuery object, which is truthy, so the (object) && " " expression results in " ". Or as James Long points out, you could use the comma operator instead, and then the return value of hide wouldn't matter: ${JsonObject ? JsonObject.Description : ($('#textbox').removeattr("style").hide(), " ")} (you don't actually need those (), but it's already confusing enough, and it's even more confusing without them, so...).
But again, I wouldn't. Instead, I'd just do:
`<td>
${JsonObject ? JsonObject.Description : " "}
</td>
`<div><input id="textbox"></div>
...and then just before or just after this template literal, have
if (!JsonObject) {
$('#textbox').removeattr("style").hide();
}
Related
I would like the a tag to change to span when the variable 'nav' is false. When I try to do this, the text literally changes to " home " and I wish it would become an icon. What can I do?
{nav ? 'HOME' : "<span class="material-symbols-outlined"> home </span>"}
Remove " "
{nav ? 'HOME' : <span class="material-symbols-outlined"> home </span>}
Maybe move the code inside the class property and return an empty string when nav is true and material-symbols-outlined when its false.
Like this :
<span class={nav ? "" : "material-symbols-outlined"}>Home</span>
I have this object in my component ts file that looks like this:
someData = {
someValue: null,
unit: "centimeters"
},
In my template (html file) I have to verify the value of "someValue" property. If its value is null then display the unit, else display the value of someValue and unit together. I have the below code but it doesn't seem to work. Can anyone point me in the right direction? Thanks in advance!
<div>{{ someData?.someValue === null ? someData?.someValue.unit : someData?.someValue someData?.unit }}</div >
You can use ngif to check the condition and show the data:
<div *ngIf="someData?.someValue === null">{{someData.unit}}</div>
<div *ngIf="someData?.someValue!= null">{{someData.someValue}} {{someData.unit}}</div>
Your two values at the end aren't going to render right, because it's executable javascript, not HTML when inside the double brackets.
I would suggest splitting this into two lines of HTML.
<div *ngIf="someData?.someValue; else unit_only">{{someData.someValue}} {{someData.unit}}</div>
<ng-template #unit_only>{{someData?.unit}}</ng-template>
Or you could try sticking with your original approach...
<div>{{ someData?.someValue === null ? someData?.unit : someData?.someValue + ' ' + someData?.unit }}</div>
Let's say I have a tag that uses a ternary operator to add alignment to it:
<td
:class="alignment ? ('u-' + alignment) : null"
>
This works as expected since I have my pre-defined alignment classes with the number that I need, now I would like to add a new attribute in this tag, let's say I want to add the class u-bright if the prop isBright is true:
<td
:class="{'u-bright' : isBright}"
>
How to keep both conditions in the same tag? Something like:
/** Obviously this doesn't work */
<td
:class="{
alignment ? ('u-' + alignment) : null,
'u-bright' : isBright
}"
>
Try to use the array syntax :
<td
:class="[alignment ? ('u-' + alignment):'', isBright?'u-bright':'']"
>
I'm pretty new to JavaScript and it makes this even more difficult for me.
I'm trying to put a condition in my column template but I can't get it to work.
The code is this:
template: '#viewMode' == "EDIT" ? '<input class="equipDropDownEditor"/>' : "#:PROMOTION_TYPE#",
This almost shows what I want. The problem is that if the Promotion_Type field is null, it shows null on the screen.
So, the condition that I want to implement is: If the viewmode is "edit", it will return the equipDropDownEditor.
In case it is not, it shows the field PROMOTION_TYPE. But, in case that Promotion_Type returns a null, I don't want it to show anything (empty string, for example.
This is what I have tried. Still got the null on the screen when the "viewMode" is not "EDIT".
template: '#viewMode' == "EDIT" ? '<input class="equipDropDownEditor"/>' : ("#:PROMOTION_TYPE#" == null ? " " : "#:PROMOTION_TYPE#"),
To help someone in the future, I got it working with: template:
'#viewMode' == "EDIT" ? '<input class="equipDropDownEditor"/>' : ("#:PROMOTION_TYPE#" == null ? " " : "#:PROMOTION_TYPE#" == "#:PROMOTION_TYPE#"),
Thanks anyway #Bertrand Le Roy
I have a list of answers that I would like to separate by a comma, but I do not want the last comma to show - how can I do this using ng-repeat and !$last? This is the html I have so far (which is not showing the entire last answer):
<h3 ng-repeat="answer in correctAnswers" ng-show="!$last">
{{answer + "," + " " }}
</h3>
I would recommend not using a separate span and toggling visibility, but use something closer to what you have already attempted:
<h3 ng-repeat="answer in correctAnswers">
{{answer + ($last ? '' : ',')}}
</h3>
No extra directives to be processed, just simple boolean logic w/ concatenation of a string
For convenient, you can try this
<h3 ng-repeat="answer in correctAnswers">
{{answer}}<span ng-show="!$last"> + "," + " "<span>
</h3>