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'}"
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 am new to React. I have a very simple form which contains employer address details. I would like to validate if any of the fields got value, then check if length is <=10 and if not exists the it is fine. There are no mandatory validation and only length valiation if exists.
currently doing like below:
const isValid=
employer.address == null ||
(employer.address != null &&
(employer.address.building?.length <= 2) &&
employer.address.street?.length <= 2 &&
employer.address.county?.length <= 2 &&
employer.address.city?.length <= 2 &&
employer.address.postcode?.length <= 2);
Is there a better way to test to check validation if it contains value and ignore if not.
it is neither bad nor the best way
with current code you can do a bit clean Up to make it look nicer
you can assign a const to employer.address so no need to repeat it
const emp = employer.address
const isValid=
!emp||
(emp&&
(emp.building?) &&
emp.street?&&
emp.county?&&
emp.city? &&
emp.postcode?);
in the example above validation works if data is '' but if it has anything inside it ('s') validation would not be called
i think it should work same way
also there are some packages that provide you validation
redux form
https://redux-form.com/8.3.0/
yup
https://www.npmjs.com/package/yup
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.
I am having the below line of code which is having two values Absent and Present.If the value is Absent i want make it red colour and bold.I tried
by applying style but it is not working.please suggest me how to do it .
code:
<div class="flex-2 bold1">{{attendance.status == 'Absent' ? "style='color:red;font-weight:bold'" :" "}}</div>
There are two ways to do that:
<div class="flex-2 bold1" ng-style="attendance.status == 'Absent' && {'color':'red','font-weight':'bold'}"></div>
Other is by using class (Recommended)
.highlighted {
color:red;
font-weight:bold
}
ng-class="{'highlighted': attendance.status == 'Absent'}"
using class (Recommended):
Create the style in class and mention it in ng-class with conditional operator
ng-class="{attendance.status == 'Absent'?'test': 'test1'}"
I have many tags in HTML with ng-class directive which looks like:
div(class="item-detail-section-line", ng-repeat="group in FieldGroups")
a(href="", ng-click="groupClick(group)",
ng-class="group == currentGroup ? 'item-detail-section-line-selected' : " +
"'item-detail-section-line-unselected'"
I am just wondering if there is any way to write ng-class directive in more compact way? May be move the condition to controller?
Moving the condition to a controller is not a bad idea to clean up your view.
// In your controller
$scope.setDetailLineSelectedClass =
{
'item-detail-section-line-selected': $scope.group == $scope.currentGroup,
'item-detail-section-line-unselected': $scope.group != $scope.currentGroup
}
// In your view
ng-class="setDetailLineSelectedClass"
// Using non-scope variable (created by ng-repeat)
// In your controller
$scope.setDetailLineSelectedClass = function(group){
return {
'item-detail-section-line-selected': group == $scope.currentGroup,
'item-detail-section-line-unselected': group != $scope.currentGroup
}
}
// In your view
ng-class="setDetailLineSelectedClass(group)"
For ng-class there isn't a very much shorter way. You could use the object notation for it:
ng-class="{'item-detail-section-line-selected': group == currentGroup, 'item-detail-section-line-unselected': group != currentGroup}"
In your case it might not be shorter necessarily.
Another approach is to move the logic to an ng-if instead. Although you gain some watchers compared to the initial approach, it would be more readable and manageable than using ng-class as you can use functions using the ng-if:
div(class="item-detail-section-line", ng-repeat="group in FieldGroups")
a(href="", ng-click="groupClick(group)",
ng-if="group == currentGroup"
class="item-detail-section-line-selected"
a(href="", ng-click="groupClick(group)",
ng-if="group != currentGroup"
class="item-detail-section-line-unselected"