why ng-show, ng-hide and ng-init doesn't work even

Question

i actually work on a mean Stack project using angularJs and nodejs but i'm stuck on the use of ng-show , ng-hide and ng-hide

so here is my index.html:

 <body ng-app="app">
    <div ng-controller="loginController"  ng-init="logged='false'" >

   <div class ="login" ng-hide="logged">
       <h3>Connexion </h3>
      <form action="" method="get">
    <label for="pseudo">Pseudo</label>
    <input type="text" name="pseudo">
    <label for="pwd">Mot de passe</label>
    <input type="password" name="pwd">
    <input type="submit" ng-click="auth()" value="Connexion">
       </form>
   </div>
</div>
   <div class="kuiz" ng-show="logged">
   {{ name }}
  </div>
  </body>

app.js

/// reference path = "angular.min.js" />
var myApp = angular.module('app', []);


   myApp.controller('logincontroller',
   function($scope,$http){
     $scope.auth = function(data){
     $scope.logged = true;
    $scope.name= "lyes";
  }
 });

as you can see i'm trying to do authentication but actually i just want show authentication form and hide it after authentication.

ps:i included all necessary files.

i'm getting these errors in my browser inspector

Refused to apply style from 'http://localhost:3116/main.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Failed to load resource: the server responded with a status of 404 (Not Found)

Hi Iyes, where are you including the css file? That is not shown. Anyway, have a look at the answers on this question. https://stackoverflow.com/questions/48248832/stylesheet-not-loaded-because-of-mime-type — Dijkgraaf, Nov 06 '18 at 02:34

score 0 · Answer 1 · answered Nov 06 '18 at 05:16

In your ng-init, you define logged='false' which sets log to the string false, rather than the boolean false. Therefore, your ng-hide and ng-show probably doesn't work as intended. You need to remove the quotes around the false in order to make it a boolean.

As a side note, your auth function expects input, but you are not passing any on your ng-click.

In regards to the errors in your console, you don't need the form action or method, which will resolve the 404 error you are receiving.

why ng-show, ng-hide and ng-init doesn't work even

1 Answers1