Angular and ng-show not disabling items

Question

I'm having a problem where ng-show isn't working as I'd like it to. Basically, when I click on a given panel, I'd like it to display the information for that tab. I'm trying to control it using ng-show but I can't seem to find what is wrong:

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

I know I'm probably just missing something silly, but any help would be most appreciated.

score 2 · Accepted Answer · edited May 23 '17 at 11:44

2

The problem is you had defined tab and changing it inside ng-repeat itself. Basically ng-repeat does create new scope inside itself. For more details look at this similar answer

Change tab to 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>

As said by @developer033 in comment, you could make it more better by using ng-switch directive instead of having 3 ng-show directives.

edited May 23 '17 at 11:44

Community

1
1

answered Jul 05 '16 at 14:28

Pankaj Parkar

134,766
23
234
299

It turns out this isn't the right answer, but had me looking in the right area. Looking to the ng-show, it has two equal signs attached to it. – ParanoidPenguin Jul 05 '16 at 14:32
@ParanoidPenguin I'm damn sure that, it isn't possible to make it working without the change which I suggested.. – Pankaj Parkar Jul 05 '16 at 19:52
@Pankaj_Parkar Unfortunately, as I'm not using Git on this, I'm not able to verify why this isn't the case. I've altered the code now, placing most of the functionality of the tabs and active tabs within a controller. If you feel your answer, in most cases would be correct, I don't mind to submit it as the answer; but the code below was what was needed to fix my problem. – ParanoidPenguin Jul 05 '16 at 20:09

score 0 · Answer 2 · answered Jul 05 '16 at 14:33

0

So, it turns out that it was something silly, I have two equals signs next to ng-show.

Original:

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

Becomes:

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

answered Jul 05 '16 at 14:33

ParanoidPenguin

151
1
13

You can use `ng-switch` directive (https://docs.angularjs.org/api/ng/directive/ngSwitch), in my opinion it fits better in this situation. – developer033 Jul 05 '16 at 15:33
@developer033 Huh, I'm following along with a tutorial and they used 'ng-show'.....I'm wondering now why they didn't use 'ng-switch', as it does seem to be a better fit. Is it part of Angular 1 or added in the later version? – ParanoidPenguin Jul 05 '16 at 15:35
Yes, it's part of Angular1. – developer033 Jul 05 '16 at 15:36
@ParanoidPenguin that was there from starting, It depends on developers mind, which directive to use in which situation.. – Pankaj Parkar Jul 15 '16 at 12:03

Angular and ng-show not disabling items

2 Answers2