CODEWITHSUNDEEP
angularjsdirectiveng-hide
Soundwave
Soundwave

Reputation: 625

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

Upvotes: 0

Views: 747

Answers (3)

alfishan aqeel
alfishan aqeel

Reputation: 220

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>

Upvotes: 0

Christian Carrillo
Christian Carrillo

Reputation: 414

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>

Upvotes: 2

Stevers
Stevers

Reputation: 535

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

Upvotes: 2

Related Questions