I am trying to hide or show my radio button using ng-if condition. Based on the formName return values.
<input type="radio" class="control-label" name="reportTypeRadios"
ng-value="reportType" ng-if="formName != 'DELETEREPORTTYPEENTITY' || formName != 'DELETEREPORTTYPESENTITY'"
ng-model="$parent.reportTypeRadio" ng-change="propertyRadioChanged(reportTypeRadio)">
{{reportType.reportTypeLabel}} </input>
But I am seeing the radio button in both forms. For some reason the ng-if condition does not work. Can someone suggest me what is wrong ?
formName != 'DELETEREPORTTYPEENTITY' || formName != 'DELETEREPORTTYPESENTITY'
This will always evaluate to true... Logically speaking:
If your formName is DELETEREPORTTYPEENTITY then your expression is going to be: (First part)false || (second part)true == true
If your formName is DELETEREPORTTYPESENTITY then your expression is going to be: true || false == true
If your formName is something else then your expression is going to be: true || true == true
I suspect that you wanted to write
formName == 'DELETEREPORTTYPEENTITY' || formName == 'DELETEREPORTTYPESENTITY'
so that you will only have the radio button showing up on those two forms that are named DELETEREPORTTYPESENTITY and DELETEREPORTTYPEENTITY, and nowhere else. Anyway, you should rework your condition to fit your needs.
The condition as in your code will always evaluate to true since formName can't be equal to both 'DELETEREPORTTYPEENTITY' and 'DELETEREPORTTYPESENTITY' at the same time.
Only way ng-if gets false is if both sides of || equate to false which can never happen.
I believe what you want to achieve here could be done by just one equality i.e.
ng-if="formName=='DELETEREPORTTYPEENTITY'"
Related
Can someone expalain this code to me? I am getting a (false && false && why are you comparing a hyperlink markup?
{id === constants.ACCOUNT_NO && sessionState['backBtnAddressDetails'] &&
Confirm details }
The logic that the chained &&s implement is: the final expression in the chain, that is, the
Confirm details
gets rendered only if the prior two expressions are truthy.
Another way of doing the same thing would be:
{showConfirmLink()}
const showConfirmLink = () => {
if (id !== constants.ACCOUNT_NO || !sessionState['backBtnAddressDetails']) {
return null; // don't render anything
}
return Confirm details;
};
Another example of this, outside of React:
const theValue = 'abc' && true && 'theValue';
console.log(theValue);
If any of the expressions in an && chain are falsey, the chain stops evaluating there, and the whole thing resolves to that falsey expression. Otherwise, it evaluates to the final expression in the chain.
This type of expression is referred to as conditional rendering in React ,
basically if the condition is true, the element right (the Confirm details element in your case ) after && will appear in the output. If it is false, React will ignore and skip it.
it could mean the id and constants.ACCOUNT_NO aren't of the same type (when you use the === operator it strictly compares the types too )
another possibility is sessionState['backBtnAddressDetails'] could be null
I'm using angularjs and trying to set up a flag on the front end for my ng-if. I wanted to consolidate the logic in the controller but the the ng-if is only returning true and never false.
I need some efficient way for my code to return false if conditions are not met instead of returning undefined.
vm.showLocButton = !vm.isSupervisorReviewApp && vm.application.benefitPeriod.program.programType.id === vm.constants.programTypeId.directBill && vm.application.applicationStatus.code === vm.constants.applicationStatus.locIssued;
Dont know exactly but I see '=' instead of '==' are you assigninv the value or comparing if comparing than try using '=='
vm.showLocButton == !vm.isSupervisorReviewApp && vm.application.benefitPeriod.program.programType.id === vm.constants.programTypeId.directBill && vm.application.applicationStatus.code === vm.constants.applicationStatus.locIssued;
It will really helpful if you can post the entire code.
ng-if="self_employment.business_type != 'Trust' || self_employment.business_type !== 'Partnership'"
Use != instead of !== :
ng-if="self_employment.business_type != 'Trust' || self_employment.business_type != 'Partnership'"
When You face this kind of problems, First check the object is defined or not. print the {{self_employment.business_type}} in the Html/console. If it is coming "trust/partnership" then it is in lowercase. if it is lowercase it may cause to fail the condition.
"trust" === "Trust" // false
"trust" == "Trust" // false
"trust" == "trust" // true
I need to add multiple condition in the ng-style.
How can I do this?
I tried below code but it is not working.
ng-style="ifTrue?'opacity:1;' : 'ifTrue? 'opacity: 1;': 'opacity: 0.5;''"
You can simply separate your conditions with ",".
Something like this:
ng-style="{ 'background-color': '#ff0', color: 'red' }"
See this example: http://jsbin.com/fabisepede/edit?html,output
Always remember to put quotes on "dashed" word ('background-color').
For the value you can also use variables defined in your controller and assign the style conditionally, but for that i prefer ng-class.
This worked for me
ng-style="IfCondition1 ? checkAnotherCondition && {'color':'red'} : {'color': 'green','font-weight':'bolder'}"
It checks my first condition and if true then it checks another condition and if that is true it makes it red. If the first condition is false then the last style is applied.
You could use something like
ng-style="condition && { /*properties*/ } || condition2 && { /*other properties*/ }"
ng-style="ifTrue ? 'opacity:1;' : 'opacity: 0.5;'
ng-style=(condition) ? 'run this if true' : 'run this if false'
Why dont use something like this?
how to set for three condition
example:
if data is === 1 then red
if data is === 2 then blue
else pink
#mario - you can use something like
[ngStyle]="{'property-to-set': (if_1) ? (true_block_1) : ((if_2) ? (true_block_2) : (other_true))}
I have 2 classes in and collapse and I want to apply both classes for same condition in angular js.
ex.
data-ng-class="{'in collapse': review.status != 'completed' && review.status != 'signedOff'"
can any one have idea how I can apply with this ?
Actually what you were doing is completely valid, you just forgot a closing curly bracket }
data-ng-class="{'in collapse': review.status != 'completed' && review.status != 'signedOff'}"