Turn off the header display for the login page

I have an angular js app with an index.html page that loads all the scripts and a default header present in all the views. Here is my index.html:

<!doctype html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/angular-material/angular-material.css" />
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->
</head>

<body ng-app="pcrApp">
    <md-toolbar ng-controller="HeaderCtrl" role="navigation" layout="row">

        <div layout-align="left center" flex="15" hide-sm>
            <md-button id="jdpa-logo" ng-href="#/list" ng-click="resetSelectedIndex()">J.D. Power PCR Admin Tool</md-button>
        </div>

        <md-tabs md-selected="data.selectedIndex" layout="row" layout-align="left center" flex>
            <md-tab id="tab-list" flex-sm="5" label="Study PCRs"></md-tab>
            <md-tab id="tab-new" flex-sm="5" label="Create New"></md-tab>
        </md-tabs>
    </md-toolbar>


    <div ng-view=""></div>

    <!-- Google Analytics code should be added here -->

    <!-- JavaScript libraries are included here -->

    <!-- Angular scripts are loaded here -->

</body>

</html>

The header code is shown below:

<md-toolbar ng-controller="HeaderCtrl" role="navigation" layout="row">

    <div layout-align="left center" flex="15" hide-sm>
        <md-button id="jdpa-logo" ng-href="#/list" ng-click="resetSelectedIndex()">J.D. Power PCR Admin Tool</md-button>
    </div>

    <md-tabs md-selected="data.selectedIndex" layout="row" layout-align="left center" flex>
        <md-tab id="tab-list" flex-sm="5" label="Study PCRs"></md-tab>
        <md-tab id="tab-new" flex-sm="5" label="Create New"></md-tab>
    </md-tabs>
</md-toolbar>

After the header, the templates are loaded using: 

<div ng-view=""></div>

If I want to disable the header for a login page, how can I achieve this?

javascriptangularjsangularjs-directiveangular-material

Answer №1

To decide if the header should be displayed, utilize the ng-hide directive. For instance,

<md-toolbar ng-hide="switches && switches.hideHeader" ng-controller="HeaderCtrl" role="navigation" layout="row">
...

In the controller of the login page, implement:

$scope.switches = { hideHeader: true }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why include HTML in our webpack bundle?

Hello there, I am currently working on an angular 2 app using this starter pack as a base. I am trying to understand what our build process will entail. I have noticed that when running: npm run build:prod npm run server:prod The HTML content is incl ...

angularjsangularbuildwebpackbundle

`Can you teach me how to dynamically load HTML elements using input JSON data?`

What is the best way to iterate through an input array of objects? I currently have data for only 2 people included. However, there are more than 50 people's information in the input and I need to loop through all of them. Here is a sample code snip ...

javascriptjqueryhtmljsonecmascript-6

Steps to sending an email to an administrator using PHP and jQuery

I am looking for a way to send a notification email to my site admin whenever a user submits a request via a form. Currently, I have the following code that is supposed to link to a PHP file on my server to handle the email sending: $("#modelform").submit ...

javascriptphpjquery

Utilize the jQuery .load() method to fetch a specific section of a webpage by passing the href as the parameter

Looking to perform an AJAX call for a specific page I understand that AJAX can be used to load a section of a document using the following code: $('#AJAX').load('/file-directory #content'); Instead of directly inputting the file path ...

javascriptjqueryhtmlajax

Creating visually appealing tables in React.js

Having trouble with table rendering in React. The buttons in the table cell are not styled properly and do not center within their div. Additionally, the table border is cut off where there are buttons or empty headers. Need help figuring out what's g ...

javascriptcsswebreactjsstyling

Utilizing file uploading in combination with selected options for a streamlined experience

Currently, I am utilizing the jQuery FileUpload plugin created by BlueImp. The plugin utilizes x-tmpl for templating purposes. My aim is to populate a tags input field with options derived from a PHP variable. For now, I am experimenting by inserting place ...

javascriptphpjquerytemplates

Adjust the color of a label based on a set threshold in Chart.js

Can anyone help me with my Chart.js issue? Here is a link to the chart: https://i.sstatic.net/RL3w4.gif I am trying to change the color of the horizontal label when it falls between 70.00 - 73.99. Does anyone know if there's a specific option for th ...

javascriptcssgraphchart.js

Changing pricing on pricing table with a click

Looking to implement a price changing button that functions similar to the one found at this LINK: If anyone knows of any JavaScript or other solution, please provide me with some guidance. Thank you in advance. ...

javascriptjqueryhtmlcsstwitter-bootstrap

What steps do I need to take to build something similar to this using AngularJS?

Struggling with understanding the concepts of AngularJs. How can I create textfields and animations like the ones in this example using AngularJS? I've tried exploring directives, but it's not quite clicking for me. I've attempted to follow ...

javascriptangularjshtmlangularjs-directive

What could be causing the submission failure of the form post validation?

My Code: <form method="post" name="contact" id="frmContact" action="smail.php"> ... <label for="security" class="smallPercPadTop">Please enter the result:</label> <br /><h3 id="fNum" class="spnSecurity"></h3>& ...

javascriptjqueryhtmlforms

Utilizing a Jquery plugin for enhanced form validation with the inclusion of supplementary techniques

I am looking to integrate a jQuery plugin into my form validation process, specifically to ensure that only letters are allowed in the name section. If a user enters special characters or numbers, I want the form to display an error message. Additionally, ...

javascriptjqueryhtmlformsvalidation

Guide to mapping points on a ThreeJS sphere in three dimensions

I've recently begun exploring the world of ThreeJS and I've encountered a challenge. I'm attempting to plot a point on a sphere, but it seems to be appearing in the southern hemisphere instead of the northern hemisphere. Vertically, it appea ...

javascriptthree.js

Error loading console due to JSON data on website

After creating a Json data file named question.json with the following content: "Endocrinology":[ { "title":"Endocrinology", "id": "001", "date":"08J", "question":"In adult men, anterior pituitary insufficiency does not caus ...

javascriptjqueryhtmljson

Is it possible to update state multiple times within a single function using setState?

I'm currently working on a card guessing game and facing an issue where I need to update the state multiple times within the same clickHandler function. However, due to the asynchronous nature of state updates, it always reverts back to the previous s ...

javascriptreactjs

Client-side filtering of events in FullCalendar

I found a helpful answer on Stack Overflow that I am trying to use for client-side event filtering. While it works perfectly for newer events, I am facing an issue with filtering events that are loaded from JSON. Below is my JavaScript code: $(document) ...

javascriptjqueryfullcalendar

Grouping and retrieving values from an array of JavaScript objects

I am looking to implement a groupBy function on the object array below based on the deptId. I want to then render this data on a web page using AngularJS as shown: Sample Object Array: var arr = [ {deptId: '12345', deptName: 'Marketin ...

javascriptangularjshtmllodash

The sticky navigation bar hack (implementing fixed positioning with jQuery)

Essentially, when the navigation bar (or any other element) reaches the top of the page or window, a class called "sticky" is added to the element and CSS styles it as fixed. This functionality acts like an IF statement - if the element is far from the top ...

javascriptjqueryhtmlcss

Looking for search suggestion functionalities in an HTML input field

I am currently working on a website project and have a database filled with recipes to support it. The issue I am facing is related to the search feature on my webpage. At the top of the page, there is a textarea where users can input their search queries ...

javascripthtmljsonsearch

Change object values to capital letters

Upon retrieving myObject with JSON.stringify, I am now looking to convert all the values (excluding keys) to uppercase. In TypeScript, what would be the best way to accomplish this? myObj = { "name":"John", "age":30, "cars": [ { "name":"Ford", ...

javascripttypescriptjavascript-objects

Is it possible to establish communication between JAVA and Javascript using Sockets?

Recently, I developed a Java application that generates some data and saves it in a text file on my computer. Instead of saving this data in a text file, I am looking to send it via Socket. Here is an example: Java public static void main(String argv[] ...

javascriptjavanode.jssockets