angularjs – 在ng-repeat中显示ng单击时隐藏的div

前端之家收集整理的这篇文章主要介绍了angularjs – 在ng-repeat中显示ng单击时隐藏的div前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在一个Angular.js应用程序,过滤通过一个json文件的医疗程序。当使用ng单击单击(在同一页上)过程的名称时,我想显示每个过程的详细信息。这是我到目前为止,.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>

我很喜欢角度。有什么建议么?

删除显示: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>

这里是小提琴:http://jsfiddle.net/asmKj/

您还可以使用ng-class切换类:

<div class="procedure-details" ng-class="{ 'hidden': ! showDetails }">

我喜欢这个更多,因为它允许你做一些不错的过渡:http://jsfiddle.net/asmKj/1/

原文链接:https://www.f2er.com/angularjs/147053.html

猜你在找的Angularjs相关文章