Управление видимостью формы в AngularJS: ng-show, boolean

Быстрый ответ

Для управления директивой ng-show в AngularJS через булево значение, вы можете связать её со свойством scope. Взглянем на пример кода:

HTML:

<div ng-show="isVisible">Вывод моего контента.</div>
<button ng-click="isVisible = !isVisible">Показать/Скрыть</button>

JavaScript:

$scope.isVisible = true; // По умолчанию элемент видим

При каждом нажатии на кнопку состояние переменной isVisible меняется, определяя видимость блока <div>.

Использование ngClick

ngClick позволяет переключать видимость элемента на странице:

// Исходное состояние переменной
$scope.isReplyFormOpen = false; // Форма ответа изначально скрыта

// Функция для изменения состояния
$scope.toggleReplyForm = function() {
    $scope.isReplyFormOpen = !$scope.isReplyFormOpen; // Процесс переключения!
};

Теперь давайте активируем функцию toggleReplyForm при клике:

HTML:

<button ng-click="toggleReplyForm()">Показать/Скрыть форму ответа</button>
<div ng-show="isReplyFormOpen">Здесь располагается форма для ответа.</div>

Обращение к переменным области видимости в scope

Чтобы избежать сложностей с наследованием, свойства в scope рекомендуется вызывать через точку:

// Основной контроллер
$scope.formData = {
    isVisible: false  // Название переменной говорит само за себя
};

// HTML
<div ng-show="formData.isVisible">Здесь ваш контент</div>
<button ng-click="formData.isVisible = !formData.isVisible">Переключить видимость</button>

Использование вложенных состояний с Angular-UI Router

Angular-UI Router позволит организовать вложенность ваших видов в веб-приложениях благодаря поддержке вложенных состояний и видов.

Глобальное состояние: требуется осторожность

Глобальные переменные scope желательно определять в корневом контроллере, чтобы сохранять чистоту и модульность кода. Использование $rootScope может казаться простым решением, оно, однако, противоречит идеологии AngularJS:

JavaScript:

app.controller('MainCtrl', function($scope) {
    $scope.globalState = {
        isFeatureXVisible: false // Глобальные переменные находятся здесь!
    };
});

HTML:
<div ng-show="globalState.isFeatureXVisible">Я появляюсь, когда ты этого захочешь!</div>

Визуализация

ng-show в AngularJS функционирует аналогично зеленому сигналу светофора, где isVisible выступает в роли контролера:

$scope.isVisible = !$scope.isVisible; // Всё действительно просто.

Можно провести аналогию со светофором:

🚦= *красный* [🛑, 🔴]  // Трафик остановлен, когда isVisible FALSE
🚦= *зеленый* [✅, ✳️]  // Трафик движется, когда isVisible TRUE

Управление вашим цифровым пространством никогда прежде не было столь простым!

Волшебство цикла обновления в AngularJS

Работая с ng-show, не забывайте о роли методов $apply() и $digest(), ответственных в AngularJS за автоматическое обновление данных и представлений, как режиссёр, следящий за постановкой спектакля на сцене.

Обучайтесь и совершенствуйте свои навыки

Посмотрите видеоуроки и уделите время изучению документации AngularJS. Погрузившись во все тонкости этого фреймворка, вы быстро продвинетесь и станете настоящим гуру AngularJS.