Угловые и ng-show не отключать элементы

У меня возникла проблема, когда 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>

Я знаю, что я, наверное, просто не хватает что-то глупое, но любая помощь была бы оценена.

источник

2016-07-05 ParanoidPenguin

Проблема: вы определили 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 директивы.

источник

2016-07-05 14:28:15

Оказывается, это не правильный ответ, но я смотрю в правой области. Глядя на ng-show, у него есть два равных знака. – ParanoidPenguin

@ParanoidPenguin Я чертовски уверен, что невозможно заставить его работать без изменений, которые я предложил .. –

@Pankaj_Parkar К сожалению, поскольку я не использую Git, я не могу проверить, почему это не так. Теперь я изменил код, добавив большую часть функциональных возможностей вкладок и активных вкладок в контроллер. Если вы почувствуете свой ответ, в большинстве случаев будет правильным, я не возражаю представить его в качестве ответа; но приведенный ниже код был тем, что было необходимо для устранения моей проблемы. – ParanoidPenguin

Итак, оказывается, что это было что-то глупое, у меня есть два знака равенства рядом с 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">

источник

2016-07-05 14:33:13 ParanoidPenguin

Вы можете использовать директиву 'ng-switch' (https://docs.angularjs.org/api/ng/directive/ngSwitch), на мой взгляд, она лучше подходит в этой ситуации. – developer033

@ developer033 Да, я следую инструкциям, и они использовали «ng-show» ..... Мне теперь интересно, почему они не использовали «ng-switch», поскольку, похоже, это лучше подходит. Является ли он частью Angular 1 или добавлен в более позднюю версию? – ParanoidPenguin

Да, это часть Angular1. – developer033

Угловые и ng-show не отключать элементы

ответ

Смежные вопросы