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

Program / 글쓴이

의료 절차의 json 파일을 필터링하는 Angular.js 앱에서 작업 중입니다. 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>

저는 앵귤러에 꽤 익숙합니다. 어떤 제안?

답변

을 제거하고 대신 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값을 사용 하고 토글 합니다.showng-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>

답변