腾讯云·社区
如何在ng-repeat内点击显示隐藏div？内容来源于 Stack Overflow，并遵循CC BY-SA 3.0许可协议进行翻译与使用
内容来源于 Stack Overflow，并遵循CC BY-SA 3.0许可协议进行翻译与使用
- 回答 (2)
- 关注 (0)
- 查看 (47)
我正在开发一个Angular.js应用程序，它可以通过json文件进行过滤。使用ng-click单击过程的名称（在同一页上）时，我想显示每个过程的详细信息。这是我到目前为止的代码，.procedure-details div设置为显示：none。
<ul class="procedures">
<li ng-repeat="procedure in procedures | filter:query | orderBy:orderProp">
<h4><a href="#" ng-click="?">{{procedure.definition}}</a></h4>
<div class="procedure-details">
<p>Number of patient discharges: {{procedure.discharges}}</p>
<p>Average amount covered by Medicare: {{procedure.covered}}</p>
<p>Average total payments: {{procedure.payments}}</p>
</div>
</li>
</ul>
谁有什么建议吗？
删除display:none，然后使用ng-show：
<ul class="procedures">
<li ng-repeat="procedure in procedures | filter:query | orderBy:orderProp">
<h4><a href="#" ng-click="showDetails = ! showDetails">{{procedure.definition}}</a></h4>
<div class="procedure-details" ng-show="showDetails">
<p>Number of patient discharges: {{procedure.discharges}}</p>
<p>Average amount covered by Medicare: {{procedure.covered}}</p>
<p>Average total payments: {{procedure.payments}}</p>
</div>
</li>
</ul>
这是fiddle：http://jsfiddle.net/asmKj/
你也可以使用ng-class切换一个类：
<div class="procedure-details" ng-class="{ 'hidden': ! showDetails }">
我更喜欢这个，因为它允许你做一些漂亮的转换：http://jsfiddle.net/asmKj/1/
这是一个工作示例：http://jsfiddle.net/pvtpenguin/wD7gR/1/ 。
<ul class="procedures">
<li ng-repeat="procedure in procedures">
<h4><a href="#" ng-click="show = !show">{{procedure.definition}}</a></h4>
<div class="procedure-details" ng-show="show">
<p>Number of patient discharges: {{procedure.discharges}}</p>
<p>Average amount covered by Medicare: {{procedure.covered}}</p>
<p>Average total payments: {{procedure.payments}}</p>
</div>
</li>
</ul>
AngularJS
扫码关注云+社区
领取腾讯云代金券