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确实在其内部创建了新的范围。有关详细信息，请查看此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>

正如@ 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不禁用项目

2 个答案: