我正在一个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:
原文链接:https://www.f2er.com/angularjs/147053.html<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/