Angular ng-隐藏不工作

Question

我正在尝试使 Angular 中的 ng-hide 或 ng-show 基于 $scope 变量.

工作

Hello

现在应该隐藏了，但它仍然显示..

我做错了什么？

控制器：

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>

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

Answer 1

你需要让它成为 ng-hide="state".

你漏掉了等号。

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

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

    {{ state }}
  </body>

这是你的 plunker，已修复。 https://plnkr.co/edit/5BY0ubF3X70yFGVVd0Po?p=preview

Answer 2

语法问题。使用 ng-hide="state" 代替 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>

Answer 3

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

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre><code>    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>

Angular ng-隐藏不工作

Angular ng-hide not working

directive

angularjs

ng-hide