Question

我正在开发一个Angular.js应用程序，它可以过滤医疗程序的json文件。当使用ng-click单击（在同一页面上）过程的名称时，我想显示每个过程的详细信息。这是我到目前为止，.procedure-details div设置为display：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>

我很有棱角。有什么建议吗？

Answer 1

删除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>

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

您还可以使用ng-class来切换课程：

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

我更喜欢这个，因为它允许你做一些很好的过渡：http://jsfiddle.net/asmKj/1/

Answer 2

使用ng-show并在show处理程序中切换ng-click范围变量的值。

以下是一个工作示例：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>

在ng-repeat中显示ng-click时隐藏的div

2 个答案: