Im working on a complex app where I need to disable a link if the ID sent from backend meets a certain criteria.
I'm using this now but not sure if it is correct:
ng-show="parentheaderData.casid === '807' || '806' || '808' ?false:true"
Does this look right?
Why don't you move this logic to a controller so you have
html :
ng-show="showParentheader(parentheaderData.casid)"
controller:
$scope.showParentheader = function(id) {
return ! (id === '807' || id ==='806' || id ==='808');
}
Thanks for all the support. The correct solution was:
ng-hide="parentheaderData.casid == '806' || parentheaderData.casid == '807' || parentheaderData.casid == '808'"
you can do like this:
ng-show="(parentheaderData.casid === '807' || parentheaderData.casid ==='806' parentheaderData.casid === || '808') ? false : true"
or:
ng-show=" !(parentheaderData.casid === '807' || parentheaderData.casid ==='806' parentheaderData.casid === || '808')"
ng-show="(parentheaderData.casid === '807' || parentheaderData.casid ==='806' parentheaderData.casid === || '808') ? false : true"
Related
I have the following conditional
if (
!user.userId
&& match.path === '/login'
) {
component = <Login/>
} else if (
user.userId
&& !user.OTPVerified
&& !user.loginWithPassword
&& match.path === '/verify'
) {
component = <VerifyOTP/>
} else if (
(user.userId && user.OTPVerified) || (user.userId && user.loginWithPassword)
&& !user.profileCompleted
&& match.path === '/complete-profile'
) {
console.log('userid', user.userId)
console.log('otpverified', user.OTPVerified)
console.log('loginWithPassword', user.loginWithPassword)
console.log('profileCompleted', user.profileCompleted)
console.log('path', match.path)
component = <CompleteProfile/>
} else if (
user.userId
&& !user.OTPVerified
&& user.loginWithPassword
&& user.profileCompleted
&& match.path === '/login-password'
) {
component = <LoginWithPassword/>
} else {
component = <Login/>
}
console returns
userid 29
otpverified true
loginWithPassword false
profileCompleted true
path /login
I dont get why am i still seeing CompleteProfile component
Add some parenthesis around those two expressions with the || between them if they should be evaluated together.
((user.userId && user.OTPVerified) || (user.userId && user.loginWithPassword))
This change makes your Login component show based on the values.
You can remove the inner ones too and the && will be evaluated first.
(user.userId && user.OTPVerified || user.userId && user.loginWithPassword)
else if (
(user.userId && user.OTPVerified || user.userId && user.loginWithPassword)
&& !user.profileCompleted
&& match.path === '/complete-profile'
)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#Operator_precedence
console.log((true && true) || (true && false) && false && false) //true
console.log((true && true || true && false) && false && false) // false
I am using ReactJS and a library called React-Table for an online gaming site.
In the table, I have one column cell that could potentially be empty or NULL.
So, if that column cell is null or empty or undefined, then I want to show a value called, "Dungeon Master".
If it's not null or empty, then I just want to show what should be shown(row.original.gamerTag).
So I tried using a ternary operator to check, but no matter what, the value always shows empty.
Here is where I use it:
{
Header: 'Gamer Title',
accessor: 'gamerTitle',
Cell: ({ row }) =>
<a href="#" onClick={() =>
show(
row.original.id,
row.original.gamerTitle,
row.original.gameType,
(row.original.gamerTag == 'undefined' || '' || null) ? 'Dungeon Master' : row.original.gamerTag,
row.original.gameDescription,
)}>
{row.original.gamerTitle}
</a>
},
Am I using it wrong? I don't get any errors or anything.
Thanks!
Replace
(row.original.gamerTag == 'undefined' || '' || null) ? 'Dungeon Master' : row.original.gamerTag
By
typeof row.original.gamerTag === 'undefined' || row.original.gamerTag === '' || row.original.gamerTag === null ? 'Dungeon Master' : row.original.gamerTag
Two problem, the one is myVar == 'undefined' doesnt work because you compare string and not type. And secondly, in js is not short syntaxe for concat condition. Alternatively you can try [undefined, null, ''].includes(row.original.gamerTag).
Try replacing:
(row.original.gamerTag == 'undefined' || '' || null) ? 'Dungeon Master' : row.original.gamerTag
with:
(row.original.gamerTag == 'undefined' || row.original.gamerTag == '' || row.original.gamerTag == null) ? 'Dungeon Master' : row.original.gamerTag
Hello there I need help in converting this 'if-else' with 'or' condition into conditon that can be used in ng-class.
This here is my ng-class with condition, but it's not working correctly.
<span ng-class="{'green': work > toWork,
'red': work < toWork,
'black': work == toWork || overall == '-'}">
{{overall = showMonthly(work = (workers | getMonthValue: dts.value),
toWork = getMonthlyToWork(member.id, dts.value))}}
</span>
this is the condition I'd like to apply:
if (work > toWork) {
return "green";
}else if (work < toWork) {
return "red";
}else if (work == toWork || overall == "-") {
return "black";
}
You don't need ng-class for that, you just need to put the logic inside a method in your $scope, like below
$scope.getClass = function(work, toWork, overall){
if (work == toWork || overall == "-"){
return "black";
}else if (work < toWork) {
return "red";
}else if(work > toWork) {
return "green";
}
}
and in your view, call it like this
<span class="{{getClass(work, toWork, overall)}}"></span>
<span ng-class="{'green': work > toWork,
'red': work < toWork,
'black': (work == toWork || overall == '-')}">
...
</span>
Check this. (You have got a spell missing in your conditional statement)
Happy coding!
Not entirely sure why this isn't working. I'm trying to hide a col is the value of driveThru is false OR equals to 'N'.
ng-if="location.driveThru === false || location.driveThru === 'N'"
However the === false isn't working and I cant determine why.
if its a boolean change as ,
"!location.driveThru' || location.driveThru === 'N'
and === with string enclosed in quotes if its a string a follows,
ng-if="location.driveThru === 'false' || location.driveThru === 'N'"
I want to change the colors of my cell, so in my table i do this on my td
data-ng-class="{selected.id == price.id && !price.isMinPrice ? 'selected' : '', selected.id == price.id && price.isMinPrice ? 'minSelected' : ''}"
i have this error:
Error: [$parse:syntax] Syntax Error: Token '.' is unexpected,
expecting [:] at column 10 of the expression [{selected.id == price.id
&& !price.isMinPrice ? 'selected' : '', selected.id == price.id &&
price.isMinPrice ? 'minSelected' : ''}] starting at [.id == price.id
&& !price.isMinPrice ? 'selected' : '', selected.id == price.id &&
price.isMinPrice ? 'minSelected' : ''}].
What is wrong ..?
You are using ng-class all wrong and that is why you are getting syntax errors.
You need to give it an object literal:
data-ng-class="{selected: selected.id == price.id && !price.isMinPrice,
minSelected: selected.id == price.id && price.isMinPrice}"
This is also much cleaner than what you were trying to do.
I think that ng-class expects structure like this: {'class-name' : booleanValue}, and if value is true, class will be applied.
So in your case:
data-ng-class="{'selected' : selected.id == price.id && !price.isMinPrice, 'minSelected' : selected.id == price.id && price.isMinPrice}"
and if you want to use ternaty operator, you can use class attribute with {{}}:
class="{{selected.id == price.id && !price.isMinPrice ? 'selected' : ''}}"