angularjs - 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> 只能接受phrasing content ，以及 unordered list element <ul> 不是这样的内容。

因此，您的浏览器会将 <ul> 转换为另一种更有意义的代码。出<p> 。您的 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>