ng-repeat 내에서 ng-click 시 숨겨진 div 표시

ng-repeat 내에서 ng-click 시 숨겨진 div 표시

의료 시술에 대한 json 파일을 필터링하는 Angular.js 앱을 만들고 있습니다.ng-click으로 프로시저명을 클릭하면(같은 페이지에서) 각 프로시저에 대한 자세한 내용을 보여주고 싶습니다.다음은 .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>

나는 앵글이 꽤 새롭다.좋은 의견이라도 있나?

를 삭제합니다.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/ 를 간단하게 이행할 수 있기 때문에, 한층 더 마음에 듭니다.

사용하다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>

언급URL : https://stackoverflow.com/questions/16660826/show-hidden-div-on-ng-click-within-ng-repeat