Angular ng-hide not working

Question

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

Stevers · Accepted Answer · 2017-04-25 19:16:59Z

2

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

answered Apr 25, 2017 at 19:16

Stevers

5555 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Christian Carrillo · Accepted Answer · 2017-04-25 19:16:59Z

2

Syntax problem. Use ng-hide="state" instead ng-hide"state"

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

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

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MainController">
    <h1>Hello Plunker!</h1>

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

    {{ state }}
  </div>

answered Apr 25, 2017 at 19:16

Christian Carrillo

4143 silver badges8 bronze badges

Comments

alfishan aqeel · Accepted Answer · 2017-07-05 09:57:22Z

angular.module('myApp', [])
        .controller('mainController', ['$scope',
            function($scope) {
                $scope.state = true;
            }
        ]);



    angular.module('myApp', [])
            .controller('mainController', ['$scope',
                function($scope) {
                    $scope.state = true;
                }
            ]);
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <!-- need to assign value of ng-app to module name for automatically bootstrapping the angularjs application -->
    <div ng-app="myApp" ng-controller="mainController">
        <div ng-hide = "state"> <!-- here -->
          <p>hello</p>
        </div>
        {{ state }}
      </div>

Collectives™ on Stack Overflow

Angular ng-hide not working

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related