Показать/спрятать блок при помощи angular, как?

Question

[Максим]

Если прописать нужному блоку ng-hide="hide", а допустим ссылке прописать ng-hide="hide=!hide", то так всё работает. Но мне нужно разбить скрытие и показ блока на разные кнопки. Как такое сделать?

Answer 1

[Александр]

<span ng-click="hide=true">hide</span>
<span ng-click="hide=false">show</span>

Comments

[Сергей Протько]

И не забываем про проблемы в случае вложенности скоупов. Лучше вообще controller as syntax использовать.

[Александр]

В данном случае пример с hide лучше подходит для того что-бы понять логику работы.

[Максим]

Спасибо, а если такая структура, то не работает "показать":

<div ng-hide="hidePopup">
        <b ng-click="hidePopup=true">x</b>
</div>
<div ng-repeat="disk in disks">
<a href="javascript:void(0);" ng-click="hidePopup=false">Показать</a>
</div>

[Александр]

might:

<a href="" ng-click="hidePopup=false; return false>Показать</a>

[Александр]

might: Можно так

<div role="main" id="main" ng-controller="diskShopDescriptionCtrl" ng-init="hide={popup: true}">
    <div id="fullstory" ng-hide="hide.popup">
        <b ng-click="hide.popup=true">x</b>
        <div class="product-block">
            empty
        </div>
    </div>
    <div ng-repeat="disk in disks" class="product-block {{disk.Genre}}">
        <img id="{{disk.ID}}_img" src="img/{{disk.Image}}" alt="">
        <h2 id="{{disk.ID}}_group">{{disk.Author}}</h2>
        <p><b>Альбом</b> <span id="{{disk.ID}}_albom">{{disk.Album}}</span></p>
        <p><b>Год</b> <span id="{{disk.ID}}_data">{{disk.Date}}</span></p>
        <p><b>Цена</b> <span id="{{disk.ID}}_sum">{{disk.Price}}</span>$</p>
        <p><a href="" ng-click="hide.popup=false" id="{{disk.ID}}_full">Открыть полное описание</a></p>
        <a href="#" onclick="order(this);" id="{{disk.ID}}">Заказать</a>
    </div>
    <!--<ng-view></ng-view>-->
</div>

[Максим]

OneFive: Супер, спасибо, работает.