앵글 및 앤티 - 쇼를 사용 중지하지 않는 항목

ng-show가 제대로 작동하지 않는 문제가 있습니다. 기본적으로 주어진 패널을 클릭하면 해당 탭에 대한 정보를 표시하고 싶습니다. 나는 NG 쇼를 사용하여 제어하기 위해 노력하고있어하지만 난 잘못이 무엇인지 찾을 수 없습니다 :앵글 및 앤티 - 쇼를 사용 중지하지 않는 항목

<!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은 자체 내부에 새 범위를 만듭니다. 자세한 내용은 @ developer033 코멘트에 의해 말했듯이 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>

이 similar answer

변경 tab보고를 들어, ng-switch 지시어를 사용하여 더 나은 만들 수 3 ng-show 지시문 대신.

출처

2016-07-05 14:28:15

그것은이 정답 아니다 밝혀,하지만 내가 오른쪽 영역에보고했다. TV 쇼를 살펴보면 두 개의 등호가 붙어 있습니다. – 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

앵글 및 앤티 - 쇼를 사용 중지하지 않는 항목

답변

관련 문제