I need to place some if condition in Angular expression.I want execution of my angular expression{{}} based on some condition .
To add an express use
{{ 4 > 5 ? 'Four': 'Five'}}
Preferred way
{{verifyCondition(4, 5)}}
// In your controller
$scope.verifyCondition = function(a, b){
return a > b ? "True condition": "False condition";
}
You can't. But Angular 1.1.5 supports ternary operators in expressions:
{{"The fee is " + (isMember ? "$2.00" : "$10.00")}}
Also I used to do the following a lot to conditionally execute functions in expressions
{{goodToGo && startRace()}}
goodToGo is a simple scope variable.
Below is my expression which I was trying to write :
{{ ((entry.default == 'BLANK' || entry.default=='custom' ) ? " " : entry.default || getDefaultValuePlaceholder())}}
Related
I have tried to use grammar defined in grammars-v4 project(https://github.com/antlr/grammars-v4/tree/master/javascript/jsx) to parse jsx file.
When I parse the code snippet below,
let str =
`${dsName}${parameterStr ? `( ${parameterStr} )` : ""}${returns ? `{
${returns}}` : ""}`;
it shows the following error
line 2:32 at [#8,42:42='(',<8>,2:32]:no viable alternative at input '('
https://astexplorer.net/ shows it is a TemplateLiteral with conditionalExpression inside, any thoughts for parsing such grammar?
Thanks in advance.
Edit:
Thanks #Bart, it works.
It works fine on the following code.
const href1 = `https://example.com/lib/downloads_${page}.htm?joinSource=${joinSource}${inviter?`&inviter=${inviter}`: ''}`;
const href2 = `https://example.com/act/kol/detail_${this.props.values.list.res.rows && this.props.values.list.res.rows[0].id}_${page}.htm?joinSource=${joinSource}${inviter?`&inviter=${inviter}`: ''}`;
Given Mike's observation that it's the template string that is messing things up, here's a quick solution:
Changes:
JavaScriptLexerBase.java
Add the instance variable:
// Keeps track of the the current depth of nested template string backticks.
// E.g. after the X in:
//
// `${a ? `${X
//
// templateDepth will be 2. This variable is needed to determine if a `}` is a
// plain CloseBrace, or one that closes an expression inside a template string.
protected int templateDepth = 0;
JavaScriptLexer.g4
// Place TemplateCloseBrace above CloseBrace!
TemplateCloseBrace: {this.templateDepth > 0}? '}' -> popMode;
...
// Remove (or comment) TemplateStringLiteral
// TemplateStringLiteral: '`' ('\\`' | ~'`')* '`';
BackTick
: '`' {this.templateDepth++;} -> pushMode(TEMPLATE)
;
...
// Place at the end of the file:
mode TEMPLATE;
BackTickInside
: '`' {this.templateDepth--;} -> type(BackTick), popMode
;
TemplateStringStartExpression
: '${' -> pushMode(DEFAULT_MODE)
;
TemplateStringAtom
: ~[`]
;
JavaScriptParser.g4
singleExpression
: ...
| singleExpression templateStringLiteral # TemplateStringExpression // ECMAScript 6
| ...
;
literal
: ...
| templateStringLiteral
| ...
;
templateStringLiteral
: BackTick templateStringAtom* BackTick
;
templateStringAtom
: TemplateStringAtom
| TemplateStringStartExpression singleExpression TemplateCloseBrace
;
I did not fully test my solution, but it parses your example input successfully:
A quick look at the ANTLR grammar shows:
// TODO: `${`tmp`}`
TemplateStringLiteral: '`' ('\\`' | ~'`')* '`'
So, apparently, it’s on the “TODO List”. Allowing nested “`” string interpolation is surprising (to say the least), and will be “non-trivial” for the ANTLR Lexer (So, I would not "hold my breather" waiting on a fix for this).
Have you tried: (replacing the nested “`”s with “‘s?).
let str =
`${dsName}${parameterStr ? “( ${parameterStr} )” : ""}${returns ? “{
${returns}}” : ""}`;
I am in need of assistance reading this confusing derived column expression which contains multiple Boolean expressions.
I've tried reading it multiple ways, but not sure which one is correct.
ISNULL(ContractNumber) ? (ISNULL(PaidLossAmount)
&& ISNULL(CaseReserveAmount)) ? NULL(DT_CY) :
(ISNULL(PaidLossAmount) ? 0 : PaidLossAmount) + (ISNULL(CaseReserveAmount)
? 0 : CaseReserveAmount) : PaidLossAmount
Could someone please advise on how this expression should be read? Thanks for your advice!
This is a nested if then else in the format of [Logical test] ? [Do this if true] : [Do this if false]
This is the formatted version.
ISNULL(ContractNumber)
?(ISNULL(PaidLossAmount) && ISNULL(CaseReserveAmount))
?NULL(DT_CY)
: (ISNULL(PaidLossAmount)
? 0
: PaidLossAmount)
+ (ISNULL(CaseReserveAmount)
? 0
: CaseReserveAmount)
: PaidLossAmount
Here's a decision tree:
I need to add a margin to an element with some calculations as below:
[ngStyle]="{'margin-left': calc(sustainScrore && sustainScrore.scoring && sustainScrore.scoring.score ? sustainScrore.scoring.score + '%' : '0%')}"
This seems to throw an error :
ERROR TypeError: _co.calc is not a function Looking for a solution.
[ngStyle]="{ 'margin-left': 'calc(' + (sustainScrore?.scoring?.score || '0') + '%)' }"
This should do the trick.
Your issue was not considering calc as a string : Angular was looking for a funtion to call, while you wanted to create a CSS property. I also reduced your code with the safe navigation operator, leaving you with cleaner code.
if you want to reduce it further, use the style.XXX notation :
[style.margin-left]="'calc(' + (sustainScrore?.scoring?.score || '0') + '%)'"
I have the following condition in my angular application
else if (((column.field === "ttUser" 1|| column.field === "ttAdmin") 2&& $scope.EngttAccess) 3|| ((column.field === "btUser" 4|| column.field === "btAdmin") 5&& $scope.EngbtAccess)) {
how can i make this to solve sonar qube issue?
This should behave same way as your example.
else if (
(["ttUser", "ttAdmin"].includes(column.field) && $scope.EngttAccess) ||
(["btUser", "btAdmin"].includes(column.field) && $scope.EngbtAccess)) {
I am writing a condition in an AEM/CQ in jsp where:
ng-disabled="${!properties.enableSignInButton} || ${!(!loginForm.logInCOFInput.$invalid)} || ${(captchaShow && !captchaValidated)}"
which doesn't seems to be working.
When I print this in jsp, I get:
|||| in the page where '||' is printed literally without resolving it. Seems that is what is happening inside the ng-disabled.
two conditon must true means use "&&"
ng-disabled = "condition1 && condition2"
Any one condition true means use "||"
ng-disabled = "condition1 || condition2"
ng-disabled receives an expression there is no need to use
ng-disabled="!properties.enableSignInButton || !(!loginForm.logInCOFInput.$invalid) || (captchaShow && !captchaValidated)"