ng-disabled with multiple conditions - angularjs

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)"

Related

Having trouble with css calc() with angular 5 parsing

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') + '%)'"

Reduce the number of conditional operators (5) used in the expression (maximum allowed 3)

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)) {

How to Write If condition in Angular Expression

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())}}

rror: [$parse:syntax] Syntax Error: Token ',' is an unexpected token at column 84 of the expression

I get below error on the code:
ng-class='{removeActiveStyle:!(item.one || item.day || item.time)
,showToolTip:!(item.one || item.day || item.time)}'
Error stack
Error: [$parse:syntax] Syntax Error: Token ',' is an unexpected token at column 84 of the expression
Here you have the exact same condition. You can write it like this :
ng-class="{'removeActiveStyle showToolTip': !(item.one || item.day || item.time)}"
Working Fiddle
You need to enclose class name between single quotes,Plus you should also go through ngClass documentation https://docs.angularjs.org/api/ng/directive/ngClass
ng-class="{'removeActiveStyle':!(item.one || item.day || item.time)
,'showToolTip':!(item.one || item.day || item.time)}"
The others beat me too it!
But they are all right, you require quotes around your classes.
<div ng-class="{
'condition1': (item.one && item.two && !item.three),
'condition2': !(item.one || item.two || item.three),
'condition3': (item.one || item.two || item.three)
}">
This is a test div
</div>
Heres a working fiddle with 3 conditions and some applications of the styles
Fiddle

ng-disable with few options (refactor needed)

I'm looking for help with refactoring my code. I wrote this:
button.btn.btn-primary ng-click="ok()" ng-show="!params.page_name && !image_thumb" ng-disabled="(!params.project_name || !logo_thumb)" Ok, create
button.btn.btn-primary ng-click="ok()" ng-show="params.page_name || image_thumb" ng-disabled="(!params.page_name || !image_thumb)" Ok, create
First condition is:
(!params.project_name || !logo_thumb)
Second condition is
(!params.page_name || !image_thumb) if params.page_name || !image_thumb
but I would like use only one button with ng-disabled. Do you have any idea what I can do?
You can combine ANDs && and ORs || with parans to get a combination of the things you want.
button.btn.btn-primary ng-click="ok()" ng-show="(!params.page_name && !image_thumb) || params.page_name || image_thumb" ng-disabled="((!params.page_name && !image_thumb) && (!params.project_name || !logo_thumb)) || ((params.page_name || image_thumb) && (!params.page_name || !image_thumb))" Ok, create

Resources