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 に答える