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') + '%)'"
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 would like to simulate coupled PDEs with a Gaussian white noise field, and was unable to find any examples or documentation that suggests how it should be done. In particular, I am interested in Cahn-Hilliard-like systems with noise:
d/dt(phi) = div(grad(psi)) + div(noise)
psi = f(phi) + div(grad(phi))
Is there a way to implement this in Fipy?
You can add a GaussianNoiseVariable as a source to your equations.
For a non-conserved field, you would do, e.g.,
noise = fp.GaussianNoiseVariable(mesh=..., mean=..., variance=...)
:
:
eq = fp.TransientTerm(...) == fp.DiffusionTerm(...) + ... + noise
for step in steps:
noise.scramble()
:
:
eq.solve(...)
For a conserved field, you would use:
eq = fp.TransientTerm(...) == fp.DiffusionTerm(...) + ... + noise.faceGrad.divergence
The mask is needed: 90.99%, where:
9 - optional digit
0 - required
%,. - relevant characters '%' and '.'
For example:
Input / Result
1 ---> 1%
12 ---> 12%
12.1 ---> 12.1%
12.12 ---> 12.12%
I'm using redux-form
I've tried react-native-text-input-mask and react-native-masked-text already, however, there is no similar functionality in these packages (in the first one there is something similar, but '%' is correctly displayed only if it is used before the number but this char should be after)
The best way here is to provide masking next to the input itself.
It highly depends on how do you use the Field component (do you even use it?).
You can try to use the format prop on the Field.
Or you can provide your own component to render a field and provide own format functionality:
const renderPercentagedInput = (field) => {
function onChange(evt) {
const value = evt.target.value;
const numbers = value.replace(/[^0-9.,]/g, '')
field.input.onChange(numbers + '%')
}
return (
<TextInput
{...field.input}
onChangeText={onChange}
/>
);
}
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)"
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())}}