ng-hide 和 ng-show 都不会改变元素的可见性

Question

我开始使用AngularJS，我决定让一个列表在我点击一个按钮时出现。我的代码很简单，但是不起作用，我不明白为什么：

<div ng-app="myGame" ng-controller="gameCtrl">
    <h1>{{showLevels}}</h1>
    <p ng-show="showLevels">
        <ul>
            <li>Level 1</li>
            <li>Level 2</li>
            <li>Level 3</li>
        </ul>
    </p>
    <button ng-click="toggle()">Begin Game !</button>
</div>

并且，在 JavaScript 文件中：

var app = angular.module("myGame", []);
app.controller("gameCtrl", function ($scope) {
    $scope.showLevels = false;
    $scope.toggle = function () {
        $scope.showLevels = !$scope.showLevels;
    };
});

无论我使用 ngShow 还是 ngHide 指令，级别始终显示，尽管 $scope.showLevels 已切换，正如我在标题旁边看到的那样。

这个问题从何而来？

Answer 1

paragraph element <p> can only accept phrasing content, and the unordered list element <ul>不是这样的内容

因此，您的浏览器会将您的代码翻译成另一个更有意义的代码，方法是从 <p> 中取出 <ul>。您的 HTML 实际上是：

<p ng-show="showLevels"></p>
<ul>
    <li>Level 1</li>
    <li>Level 2</li>
    <li>Level 3</li>
</ul>

这就是为什么您的列表始终可见，无论 $scope.showLevels 变量的内容如何。解决方案是使用另一个元素，例如 document division element <div>，或者完全删除此中间元素：

<ul ng-show="showLevels">
    <li>Level 1</li>
    <li>Level 2</li>
    <li>Level 3</li>
</ul>

ng-hide 和 ng-show 都不会改变元素的可见性

Neither ng-hide nor ng-show change the visibility of the element

angularjs

angularjs-ng-show