ng-class not evaluating expression in simple example - angularjs

This code is inside ng-repeat loop. The expression is not evaluating inside browser and the entire statement is their in browser also.
<i ng-class="'icon-ok' : student.is_passed == 'passed', 'icon-remove': student.is_passed == 'failed'"></i>


You need to put your expression inside curly braces "{}"
<i ng-class="{'icon-ok' : (student.is_passed == 'passed'), 'icon-remove': (student.is_passed == 'failed')}"></i>

Related

my conditional returns undefined instead of true/false

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.

Angularjs - `ng-hide` with expression

How can I do an ng-hide inline expression like this:
ng-hide="userType!=user"
?

what is your userType ?? a string ? and you want to hide if != 'user'
ng-hide="userType!='user'"
please check this answer about ng-hide/ng-show

The ngHide directive would not work on an inline expression. The inline expression is evaluated and then the result is injected in the HTML element containing the expression.
If the inline expression is just plain text, you could try the following:
{{ userType != user ? "" : value }}
or if you do not want an empty string you could also use "null"
{{ userType != user ? null : value }}

Is there any way to write ng-class directive in more compact way

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"

parseFloat not working in angularjs view

The following conditional return false inside a angular view:
<a ng-class="(parseFloat('-0.56%') < 0) ? 'true' : 'false'">...</a>
I've already added the parseFloat method in $scope.
$scope.parseFloat = parseFloat;
Thanks for any help.

Take a look at this fiddle
You can use option 1 (as you have it) but you need to use class not ng-class
<a class="{{(parseFloat('-0.56%') < 0) ? 'true1' : 'false'}}">Option 1</a>
In order to use ng-class use this:
<a ng-class="{'true': (parseFloat('-0.56%') < 0), 'false': (parseFloat('-0.56%') >= 0)}">Option 2a</a>
<a ng-class="{'true': (parseFloat('0.56%') < 0), 'false': (parseFloat('0.56%') >= 0)}">Option 2b</a>
The difference being is that ng-class takes an object where the key is the class and the value is the boolean evaluation to determine if the class gets added to the element.

Angular expression evaluate equal to

I'd like to make something like this.
<h3 ng-show="{{mode == 'create'}}">Create Vacancy</h3>
<h3 ng-show="{{mode == 'edit'}}">Edit this Vacancy</h3>
Where $scope.mode is either "create" or "edit".
How do I do this? Nothing I'm trying is working.

ng-show evals expression itself, so don't use interpolated text. Update your code to:
<h3 ng-show="mode == 'create'">Create Vacancy</h3>
<h3 ng-show="mode == 'edit'">Edit this Vacancy</h3>

Resources