2

我开始使用 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;
    };
});

级别总是显示，无论我使用ngShoworngHide指令，尽管事实上$scope.showLevels是切换的，正如我在标题旁边看到的那样。

这个问题从何而来？

4

1 回答 1

3

段落元素<p>只能接受分词内容，无序列表元素<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变量的内容如何，​​您的列表总是可见的。解决方案是使用另一个元素，例如文档分割元素<div>，或者完全删除这个中间元素：

<ul ng-show="showLevels">
    <li>Level 1</li>
    <li>Level 2</li>
    <li>Level 3</li>
</ul>
于 2015-05-28T22:38:14.200 回答