javascript - Angular 和 ng-show 不禁用项目-6ren

javascript - Angular 和 ng-show 不禁用项目

转载作者：行者123 更新时间：2023-11-30 15:57:58

我遇到了 ng-show 无法正常工作的问题。基本上，当我单击给定面板时，我希望它显示该选项卡的信息。我正在尝试使用 ng-show 来控制它，但我似乎找不到问题所在:

<!doctype html>
<html ng-app="store">
<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="CodeSchool Angular/bootstrap-3.3.6-dist/css/bootstrap.min.css"/>  
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body ng-controller="StoreController as store">
    <ul class="list-group">
        <li class="list-group-item" ng-repeat="product in store.products">
            <h3>
                {{product.name}}
                <em class="pull-right">{{product.price  | currency }}</em> 
                <img ng-src="{{product.images[0].full}}" class="product-image"/>          
            </h3>    
            <section>
                <ul class="nav nav-pills">
                    <li><a href ng-click="tab=1">Description</a></li>
                    <li><a href ng-click="tab=2">Specifications</a></li>
                    <li><a href ng-click="tab=3">Reviews</a></li>
                </ul>


                <div class="panel" ng-show=="tab===1">
                    <h4>Description</h4>
                    <p>{{product.description}}</p>
                </div>
                <div class="panel" ng-show=="tab===2">
                    <h4>Specifications</h4>
                    <blockquote>None yet</blockquote>
                </div>
                 <div class="panel" ng-show=="tab===3">
                    <h4>Reviews</h4>
                    <blockquote>None yet</blockquote>
                </div>

            </section>
        </li>
    </ul>
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script> 
</body>
</html>

我知道我可能只是遗漏了一些愚蠢的东西，但我们将不胜感激任何帮助。

最佳答案

问题是您已经定义了 tab 并在 ng-repeat 本身中更改了它。基本上 ng-repeat 确实在其内部创建了新的作用域。有关详细信息，请查看此 similar answer

将 tab 更改为 product.tab

HTML

<section>
    <ul class="nav nav-pills">
        <li><a href ng-click="product.tab=1">Description</a></li>
        <li><a href ng-click="product.tab=2">Specifications</a></li>
        <li><a href ng-click="product.tab=3">Reviews</a></li>
    </ul>
    <div class="panel" ng-show="product.tab===1">
        <h4>Description</h4>
        <p>{{product.description}}</p>
    </div>
    <div class="panel" ng-show="product.tab===2">
        <h4>Specifications</h4>
        <blockquote>None yet</blockquote>
    </div>
    <div class="panel" ng-show="product.tab===3">
        <h4>Reviews</h4>
        <blockquote>None yet</blockquote>
    </div>
</section>