Показать скрытый div при ng-click в ng-repeat


100

Я работаю над приложением Angular.js, которое фильтрует json-файл медицинских процедур. Я хотел бы показать детали каждой процедуры при щелчке имени процедуры (на той же странице) с помощью ng-click. Это то, что у меня есть до сих пор, с div .procedure-details, установленным на 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>

Я новичок в angular. Какие-либо предложения?


3
Кроме того, вам действительно не нужен href = "#" в элементе a.
Foo L

2
Вы это делаете, если хотите передать валидатор HTML.
Дэнни Буллис,

Ответы:


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

Чтобы ответить на вопрос выше ... Просто измените ng-class на hidden на true .... ng-class = "{'hidden': showDetails}"
Крис

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>

4
Как скрыть первый div, когда я нажимаю на второй div.
User123

Это меня озадачивает ... как работает эта переменная "объема"? Когда пробую, все скрывается !?
Нико
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.