Angular expression evaluate equal to - angularjs

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>

Related

ngShow if interpolated substring equals some substring

I have the following title, and I want to show an element if person == some value, e.g family. How can I build that expression with ngShow?
<h2 class="mat-title" style="text-align:center;">Register as a {{person}}</h2>

You can use ng-if
<h2 ng-if="person==='family'" class="mat-title" style="text-align:center;">Register as a {{person}}</h2>

ng-class not evaluating expression in simple example

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>

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"

How can I add a join function to multiple ng-show items?

I have four conditional ng-show elements:
Add
<strong ng-show="current_user.candidate.skills.length == 0">skills,</strong>
<strong ng-show="current_user.candidate.roles.length == 0">roles,</strong>
<strong ng-show="current_user.candidate.projects.length == 0">projects,</strong>
<strong ng-show="current_user.candidate.qualifications.length == 0">qualifications,</strong>
to increase your chances.
I want to add a .join(', ') function rather than have the commas after each item. I'd also like to add an 'and' between the last two items if items >= 2. What's the most Angular way to do this?

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.

Resources