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


100

의료 절차의 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>

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


3
또한 a 요소에 href = "#"가 필요하지 않습니다.
Foo L

2
HTML 유효성 검사기를 통과하려면 수행합니다.
Danny Bullis

답변:


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/


3
두 번째 div를 클릭 할 때 첫 번째 div를 숨기는 방법.
User123

위의 Q에 답하려면 ... ng-class를 hidden on true로 변경하십시오 .... ng-class = "{ 'hidden': showDetails}"
Chris Lambrou

28

핸들러 에서 범위 변수 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>

4
두 번째 div를 클릭 할 때 첫 번째 div를 숨기는 방법.
User123

이것은 나를 당혹스럽게한다 ...이 "범위"변수는 어떻게 작동 하는가? 시도하면 모두 숨겨져!?
Nico
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.