Pitch your project

Random text


By admin Category Uncategorized, Posted January 25th, 2016
AngularJS: Using ng-if

For the project HHS I was assigned to work with AngulasJS a bit, even though I didn’t really know how the entire AngularJS works. So now I understand the logic a bit.

How does is ng-if works

The ng-if directive removes or recreates a portion of a DOM tree based on a expression. If the expression that is assigned to the ng-if is returned false this would remove the element from the DOM. But if it assigned to true it will reinserted in the DOM.

For the HHS project we have 2 different header file for the admin and student side.
Both headers have icons, so if you logged in as a student, it has the log-out, help and calendar icon and also the student credits, and on the admin side it only has an log-out icon.
Instead of having 2 different headers we now created just one header file for the admin and student side. Using ng-if it can display the icons and the subheader, depending which usertype is logged in.

In the View:

<div class="logged-in">
    <p>You're logged in as <span>{{ userInformation.email }}</span>
    <p ng-if="userType === 'Student'">
    Credits used: <span>{{ }}/50</span>

<!-- ICONS -->
<div ng-if="!isMobile" class="icons">
    <button class="icn logout-icn" ng-click="userLogout()"></button>
    <button ng-if="userType === 'Student'" class="icn calendar-icn"></button>
    <button ng-if="userType === 'Student'" class="icn help-icn" ng-click="guideIsOpen = !guideIsOpen"></button>

If you see in the button tag below it has an ng-if="userType === 'Student'", it meant that if you are logged in as a student it will show this icon and the credits of the student.
The logout button doesn’t have an ng-if because both usertype will have the logout icon shown if logged in.

In the directive.js we’ll have to store the value from database in the userType variable and put it in the scope, so it can be seen in the View.
The userType is connected to the database, so if you’re logged in with your email it will filter if you are and admin or a student.

Posted by Valerie Varias

Leave a Reply

Your email address will not be published. Required fields are marked *