Search code examples
angularjsdirectiveng-hide

Angular ng-hide not working

I am trying to make the ng-hide or ng-show in Angular working based on a $scope variable.

The

Hello

should be hided now but it still shows..

What am I doing wrong?

Controller:

angular
    .module('myApp', [])
    .controller('MainController', MainController);

  function MainController($scope) {
    $scope.state = true;
  }

Html:

<body ng-controller="MainController">
    <h1>Hello Plunker!</h1>

    <div ng-hide"state">
      <p>hello</p>
    </div>

    {{ state }}
  </body>

Plunker link https://plnkr.co/edit/xxWVeThH8m218aS4Dago?p=preview

Solution

  • You need to make it ng-hide="state".

    You're missing the equals sign.

    <body ng-controller="MainController">
    <h1>Hello Plunker!</h1>

    <div ng-hide="state">
      <p>hello</p>
    </div>

    {{ state }}
  </body>

    Here's your plunker, fixed. https://plnkr.co/edit/5BY0ubF3X70yFGVVd0Po?p=preview