angularjs – 在ng-repeat中显示ng单击时隐藏的div
发布时间:2020-12-17 09:11:44 所属栏目:安全 来源:网络整理
导读:我正在一个Angular.js应用程序,过滤通过一个json文件的医疗程序。当使用ng单击单击(在同一页上)过程的名称时,我想显示每个过程的详细信息。这是我到目前为止,.procedure-details div设置为显示:none: ul class="procedures" li ng-repeat="procedure in
我正在一个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/ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |