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':'']"
>
Related
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>
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();
}
Hello I'm trying to use two conditions for ng-style for angular. trip.reviewed (true/false) and trip.approval (true/false). here is my try below but I get errors. I cant find the correct format.
[ngStyle]="{'background-color': trip.approval? '#80ff80' : '#ff8080'} : {'background-color': trip.reviewed? '' : '#D3D3D3'}"
just use it:
[ngStyle]="{'background-color': tripReviewed ? (tripApproval ? '#80ff80' : '#ff8080') : '#D3D3D3'}"
Demo: https://stackblitz.com/edit/angular-rmaxnt
I've got a directive with this markup:
<button type="button" ng-class="{ 'btn-disabled': button.isDisabled }">
As you can see, btn-disabled is added as a CSS class if the scope's button.isDisabled is truthy.
Also on the scope is a property button.glyphicon. If glyphicon is truthy, I'd like to add the value of it to the <button>'s class as well.
How can I do this?
Maybe not the nicest syntax, but you could use:
data-ng-class="[button.isDisabled ? 'btn-disabled' : '', button.glyphicon]"
You could add a function to ng-class.
<button type="button" ng-class="getClass()">...
and on the controller
$scope.getClass = function(){
return ($scope.button.isDisabled ? "btn-disabled " : " ") + ($scope.button.glyphicon || "");
}
By adding this as a function you could reduce one extra watch that will be created while doing it inline in the template and abstract the logic out of html.
Can I somehow use if-then-else construction (ternary-operator) in angularjs expression, for example I have function $scope.isExists(item) that has to return bool value.
I want something like this,
<div ng-repeater="item in items">
<div>{{item.description}}</div>
<div>{{isExists(item) ? 'available' : 'oh no, you don't have it'}}</div>
</div>
I know that I can use function that returns string, I'm interesting in possibility of using if-then-else construction into expression.
Thanks.
Angular expressions do not support the ternary operator before 1.1.5, but it can be emulated like this:
condition && (answer if true) || (answer if false)
So in example, something like this would work:
<div ng-repeater="item in items">
<div>{{item.description}}</div>
<div>{{isExists(item) && 'available' || 'oh no, you don't have it'}}</div>
</div>
UPDATE: Angular 1.1.5 added support for ternary operators:
{{myVar === "two" ? "it's true" : "it's false"}}
You can use ternary operator since version 1.1.5 and above like demonstrated in this little plunker (example in 1.1.5):
For history reasons (maybe plnkr.co get down for some reason in the future) here is the main code of my example:
{{true?true:false}}
You can easily use ng-show such as :
<div ng-repeater="item in items">
<div>{{item.description}}</div>
<div ng-show="isExists(item)">available</div>
<div ng-show="!isExists(item)">oh no, you don't have it</div>
</div>
For more complex tests, you can use ng-switch statements :
<div ng-repeater="item in items">
<div>{{item.description}}</div>
<div ng-switch on="isExists(item)">
<span ng-switch-when="true">Available</span>
<span ng-switch-default>oh no, you don't have it</span>
</div>
</div>
This can be done in one line.
{{corretor.isAdministrador && 'YES' || 'NÂO'}}
Usage in a td tag:
<td class="text-center">{{corretor.isAdministrador && 'Sim' || 'Não'}}</td>
I am trying to check if a key exist in an array in angular way and landed here on this question. In my Angularjs 1.4 ternary operator worked like below
{{ CONDITION ? TRUE : FALSE }}
hence for the array key exist i did a simple JS check
Solution 1 : {{ array['key'] !== undefined ? array['key'] : 'n/a' }}
Solution 2 : {{ "key" in array ? array['key'] : 'n/a' }}