100

我正在开发一个 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>

我对角度很陌生。有什么建议么？

4

2 回答 2

158

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

于 2013-05-21T01:42:19.353 回答
28

在处理程序中使用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>
于 2013-05-21T01:44:34.503 回答