I have a ternary operator in my angular HTML. I'm having difficulty with the formatting. If the value equals the files length, it should return Good, if it doesn't I need to check some custom values. I check to see if the custom value exists (customs?.album_title) and then determine what to show. If both options were strings, it works completely fine. However, I need My Text to prepend the customs.album_title value and I'm not entirely sure how to do that. As you can see in the example below (which is naturally incorrect), the result would be customs?.album_title as a string, opposed to My Text + whatever the customs.album_title value is.
Any help would be greatly appreciated.
{{ value == files.length ? 'Good' : customs?.album_title ? 'My Text customs.album_title' : 'String Two' }}
Maybe you mean like this (using ${var})
{{ value == files.length ? 'Good' : customs?.album_title ? `My Text ${customs.album_title}` : 'String Two' }}
I'm not sure but I think Template Literals are not yet supported by Angular on HTML templates.
So for now, you can try to solve it by string concatenation
{{ value == files.length ? 'Good' : customs?.album_title ? ('My Text ' + customs.album_title) : 'String Two' }}
You can try this:
{{ value == files.length ? 'Good' : (customs?.album_title ? (('My Text ') + customs.album_title) : 'String Two') }}
Related
I am trying to write a long if else if
(!contract.hasOwnProperty('COMMIT_CONTRACT') ? '1') : (contract.hasOwnProperty('COMMIT_CONTRACT') ? '2' : '3')
However, this is failing to evaluate.
I started with:
(!contract.hasOwnProperty('COMMIT_CONTRACT')) ? '1' : '2')
But according to here you can chain them: javascript shorthand if statement, without the else portion
But it's not evaluating correctly. What am I doing wrong and how do I fix it?
You messed up with parenthesis (()).
According to my understanding,
This is your first condition: !contract.hasOwnProperty('COMMIT_CONTRACT'),
Your if part of first condition is '1',
Your else part of first condition is second condition: contract.hasOwnProperty('COMMIT_CONTRACT'),
Your if part of second condition is '2',
Your else part of second condition is '3'.
Let's add some parenthesis to make it more readable by us as well to compilers,
( !contract.hasOwnProperty('COMMIT_CONTRACT') ) ? '1' : ( contract.hasOwnProperty('COMMIT_CONTRACT') ? '2' : '3' )
Fun Fact, You will never get '3'.
You don't need all the () around everything. This will work just fine:
var variable = !contract.hasOwnProperty('COMMIT_CONTRACT') ? '1' : contract.hasOwnProperty('COMMIT_CONTRACT') ? '2' : '3';
Is it possible to return empty string when some value is "0", but from HTML page using angularJs?
If I have something like this:
<p>External | Year of Birth: {{profileCtrl.person.year}}</p>
Can I write some expression right there that will check the value for profileCtrl.person.year? If the value is "0" then return empty string, else return value of profileCtrl.person.year.
Something like this is very easy to do in languages like C#, but since I am very new to Angular I was unable to find out if this technology has a power to do such thing?
Can someone help me out with this maybe?
You can do it like this:
{{profileCtrl.person.year === 0 ? "" : profileCtrl.person.year}}
You can use a ternary operator to achieve this;
{{profileCtrl.person.year === 0 ? "" : profileCtrl.person.year}}
This basically says, if it's 0 provide "", else provide the year.
Hope it helps!
You could use the ternary operator ?:
{{ profileCtrl.person.year === 0 ? "" : profileCtrl.person.year }}
You could use a logical OR ||, which uses the second value if the first value is falsy.
<p>External | Year of Birth: {{profileCtrl.person.year || ""}}</p>
Another solution could be to show the wole part, with ng-show attribute and a truthy value. On a falsy value the part is hidden.
<p ng-show="profileCtrl.person.year">External | Year of Birth: {{profileCtrl.person.year}}</p>
Use ternary operator:
<p>External | Year of Birth: {{profileCtrl.person.year !== 0 ? profileCtrl.person.year : ""}}</p>
Another approach might be (haven't checked):
<p>External | Year of Birth: {{profileCtrl.person.year || ""}}</p>
you can use filter in your code for return empty
//js file
app.filter("filterName",function(){
return function(input){
switch(input){
case 0:
return "";
}
});
<!-- html page -->
{{input | filterName}}
I am trying to apply more than 1 condition to className in my jsx view. However it won't let me.
It only listens to the first condition.
className={usernameFocus ? "toggled" : "" || usernameValidated ? "validated" : ""}
I have tried several combinations:
className={usernameFocus ? "toggled" : "" + usernameValidated ? "validated" : ""}
How could I accomplish more than one conditional to add classNames to my element?
Your order of operations is mixed up. Put your separate conditions in parentheses. Also, you can short-circuit the class evaluation like this:
className={(usernameFocus && "toggled") + " " + (usernameValidated && "validated")}
If you feel extra fancy, you can also use a template string:
className={`${usernameFocus && "toggled"} ${usernameValidated && "validated"}`}
If you do this a lot (multiple booleans), have a look at the officially recommended classnames module by Jed Watson. Link.
With it, you can do it like this:
var usernameClasses = classNames({
'validated': usernameValidated,
'toggled': usernameFocus
});
className={usernameClasses};
I think you are missing a space between the class names for when both are applied, also brackets help with multiple nested conditional statements.
Try this:
className={(usernameFocus ? "toggled" : "") + " " + (usernameValidated ? "validated" : "")}
I have the following code:
<td data-ng-repeat="fld in checkedFields" ng-init="field = result[fld.field]; filter = fld.filter">
<span>
{{ null != filter ? field | filter : field }}
</span>
</td>
I am getting the following console error
Error: [$parse:syntax] Syntax Error: Token '|' is unexpected, expecting [:] at column 24 of the expression [null != filter ? field | filter : field] starting at [| filter : field].
Does any know how to use AngularJS filter with ternary operator expression?
NOTE: fld.filter will be a AngularJS filter
Use round brackets around the filter expression:
{{ null != filter ? (field | filter) : field }}
In Angularjs | is used for applying filters.Try this
{{ null != filter ? (field | filter) : field }}
{{ null != filter ? (field || filter) : field }}
It is barfing on your | statement, that will not work, because | is a special char for angular (it means apply a filter)
this is the ternary operator that will work if you are trying to do a regular ternary operator
{{null != filter ? filter : field}}
EDIT
If you want to apply the filter you will need to do it at the ng-repeat
<td data-ng-repeat="fld in checkedFields | filterExpression" ng-init="field = result[fld.field]; filter = fld.filter">
<span>
{{fld.someProperty}}
</span>
</td>
you cannot apply your filter on the text you are displaying, and expect the filter to apply to the list. If you are trying to filter you list you will need to modify your code, to apply the filter at the ng-repeat. I have included a link on how filtering works, I recommend looking it over to get a handle on what is going on.
I have the following :
<div>{{animalType}}</div>
which evaluates to dog.
Can I conditionally add an sif animalTypeevaluates to anything other than dog?
Something like this : which doesn't work
<div>{{animalType}} {{'s' : !animalType == 'dog'}}</div>
So I would getcats
Use ternary operator in expression as follow:
<div>{{animalType}}{{animalType != 'dog' ? 's' : '' }}</div>
Alternatively
<div>{{animalType}}<span ng-show="animalType!='dog'">s</span></div>
Not tested, but try this simple snippet:
<div>{{animalType === "dog" ? animalType : "s"}}</div>
By the way, if you want to switch only between two values, from my point of view, logically appealing would be something like that:
<div>{{isDog ? "dog" : "s"}}</div>
$scope.isDog = true/false
You could also use ng-if
<div>{{animalType}}<div ng-if="animalType !== 'dog'">s</div></div>