如何在ng-repeat内点击显示隐藏div?

内容来源于 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>

扫码关注云+社区

领取腾讯云代金券