我无法让我的内容一次显示/隐藏一个

Question

我需要一些关于此代码的帮助我尝试在ng-click上使用<h4>来显示/隐藏ng-repeat的内容。问题是，当我点击<h4>时，所有<h4>代码都会被切换，我只希望一次显示一个（只是单击的那个）。                  

  <div class="container" ng-controller='MainController'>

<div class='main'>
<h4 ng-click='clicked=!clicked'>Apetizers</h4>
<div class ='row' ng-repeat='apetizer in apetizers' ng-show='clicked'>
<div class='col-xs-8'>{{apetizer.name}}</div>
<div class='col-xs-4' id='price'>{{apetizer.price | currency}}</div>
</div>

<h4 ng-click='clicked=!clicked'>Soups</h4>
<div class ='row' ng-repeat='soup in soups' ng-show='clicked'>
<div class='col-xs-8'>{{soup.name}}</div>
<div class='col-xs-4' id='price'>{{soup.price | currency}}</div>
</div>

 <h4 ng-click='clicked=!clicked'>Rice</h4>
 <div class ='row' ng-repeat='r in rice' ng-show='clicked'>
 <div class='col-xs-8'>{{rice.name}}</div>
 <div class='col-xs-4' id='price'>{{rice.price | currency}}</div>
 </div>

 <h4 ng-click='clicked=!clicked'>Chicken</h4>
 <div class ='row' ng-repeat='chicken in chickens' ng-show='clicked'>
 <div class='col-xs-8'>{{chicken.name}}</div>
 <div class='col-xs-4' id='price'>{{chicken.price | currency}}</div>
 </div>

 <h4 ng-click='clicked=!clicked'>Seafood</h4>
 <div class ='row' ng-repeat='seafood in seafoods' ng-show='clicked'>

 <div class='col-xs-8'>{{seafood.name}}</div>
 <div class='col-xs-4' id='price'>{{seafood.price | currency}}</div>
 </div>

 </div>
 </body>
 </html>

Answer 1

您必须为每个h4创建一个变量

<h4 ng-click='clicked=!clicked'>Apetizers</h4>
<div class ='row' ng-repeat='apetizer in apetizers' ng-show='clicked'>
<div class='col-xs-8'>{{apetizer.name}}</div>
<div class='col-xs-4' id='price'>{{apetizer.price | currency}}</div>
</div>

<h4 ng-click='clicked2=!clicked2'>Soups</h4>
<div class ='row' ng-repeat='soup in soups' ng-show='clicked2'>
<div class='col-xs-8'>{{soup.name}}</div>
<div class='col-xs-4' id='price'>{{soup.price | currency}}</div>
</div>