Angular 和 ng-show 不禁用项目

Question

我遇到了 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>

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

Answer 1

问题是您定义了 tab 并在 ng-repeat 本身内部进行了更改。基本上 ng-repeat 确实在其内部创建了新的范围。有关详细信息，请查看此

将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>

正如@developer033 在评论中所说，您可以通过使用 ng-switch 指令而不是 3 个 ng-show 指令来使其变得更好。

Answer 2

所以，事实证明这很愚蠢，我在 ng-show 旁边有两个等号。

原文：

        <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">

变为：

            <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">

Angular 和 ng-show 不禁用项目

Angular and ng-show not disabling items

javascript

html

angularjs

ng-show