Использование директив ngShow и ngHide в AngularJS

Сегодня мы посмотрим на то, как можно использовать директивы ngShow и ngHide в Angularjs.

Зачем они нужны


ngShow и ngHide позволяют отображать или скрывать различные элементы. Это помогает при создании Angular-приложений, так как наши SPA, скорее всего, будут иметь много частей, которые, в зависимости от состояния нашего приложения необходимо скрывать или показывать.

Большим преимуществом этих директив является то, что нам нет необходимости скрывать или показывать элементы при помощи CSS или JavaScript. Это все обрабатывает старый добрый Angular.

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


Чтобы использовать ngShow или ngHide, нужно просто добавить директиву к элементу, который вы хотите показать или скрыть.

<!-- FOR BOOLEAN VALUES =============================== -->
<!-- for true values -->
<div ng-show="hello">this is a welcome message</div>   

 <!-- can also show if a value is false --> 
<div ng-show="!hello">this is a goodbye message</div>   

<!-- FOR EXPRESSIONS =============================== -->
<!-- show if the appState variable is a string of goodbye -->
<div ng-show="appState == 'goodbye'">this is a goodbye message</div> 

<!-- FOR FUNCTIONS =============================== -->
<!-- use a function defined in your controller to evaluate if true or false -->
<div ng-hide="checkSomething()"></div> 


Когда разметка создана, необходимо установить значения переменных hello или goodbye. Сделать это можно, например, в контроллере Angular и соответствующий div будет показан или скрыт после загрузки приложения.

Использование с логическими значениями


Демо
Мы создадим ссылку, которая использует ngClick для установки переменной goCats в положение true или false.
<a href ng-click="goCats = !goCats">Toggle Cats</a>

Теперь можно показать или скрыть изображение кота с помощью ng-show.
<img ng-src="http://i.imgur.com/vkW3Lhe.jpg" ng-show="goCats">

Мы используем ng-src для изображений, которые используются в angular приложении, если изображение должно быть скрыто. Если не использовать эту директиву, изображение будет показано в момент загрузки приложения, а затем исчезнет, ​​как только angular поймет, что изображение должно быть скрыто.


Вычисляемые выражения


Демо
Здесь мы вычисляем строку, получаемую из нашего поля ввода. Мы связываем поле ввода с помощью ng-model с переменной aminal.В зависимости от введенного значения, если строка есть, будет показано изображение.
<input type="text" ng-model="aminal">  

А в директиве ng-show будем вычислять значение этой переменной
<img ng-src="http://i.imgur.com/vkW3Lhe.jpg" ng-show="aminal == 'cat'"> 


Использование с функцией


Демо
Здесь мы сделаем простую проверку, является ли введенное число четным или нечетным. Мы создадим функцию в нашем файле AngularJS:
// set the default value of our number
$scope.myNumber = 0;
    
// function to evaluate if a number is even
$scope.isEven = function(value) {

if (value % 2 == 0)
  return true;
else 
  return false;

};

Теперь, все что мы должны сделать, это вызвать функцию с помощью ng-show или ng-hide и передать ей числа.
<!-- show if our function evaluates to false -->
<div ng-show="isEven(myNumber)">
    <h2>The number is even.</h2>
</div>
  
<!-- show if our function evaluates to false -->
<div ng-show="!isEven(myNumber)">
    <h2>The number is odd.</h2>
</div>

В итоге


Как мы видим, с помощью этих двух простейших директив можно делать очень многое. Надеюсь, это поможет вам в создании ваших приложений. Чуть позже будет статья об использовании анимаций в связке с ngShow и ngHide.

Оригинал статьи — scotch.io/tutorials/javascript/how-to-use-ngshow-and-nghide
Поделиться публикацией
Похожие публикации
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама
Комментарии 18
  • +7
    Ждем статей — как экранизировать переменную с помощью angular или как складывать числа на js.
    • –3
      Следующая по видимому будет про ng-class.
      • +3
        Понимаю, слишком уж просто. Но я решил зайти издалека.
        • 0
          А зачем? Такие основы легко и непринужденно учатся по документации. Да и вообще говоря, эти директивы достаточно интуитивны, чтобы тратить на них сколько-либо значимого времени. Чего действительно не хватает — это основы оптимизации приложений на angular — тут есть где развернуться.
          • +4
            Меньше юзать скоуп, не включать без крайней нужды dirty-checking (обычно они и не нужны, достаточно проверки по отдельным свойствам и если уж нужно мониторить что-то жирное, то кастомный ватчер, который возвращает хэш какой-то вместо копирования объекта целиком + diff), не использовать фильтры для обхода массивов (ибо они будут отрабатывать на каждый $digest), стараться делать все так, что бы количество вызовов $digest было минимальным…

            По сути в плане оптимизации angular приложений — слабое место это $scope. Причем если вы посмотрите на github какие-то более мение большие проекты опенсурсные, то там в этом плане все грустно. Где-то в $scope пробрасывается функция напрямую использующая $http, где-то еще какой-то треш… Контроллеры на 100% состоящие из ватчеров и каких-то функций, пробрасываемых в $scope…
            • 0
              А где можно посмотреть на примере оптимизированное приложение?
              • +1
                Честно, не могу сказать, ибо не знаю. Хотя сам бы хотел посмотреть.

                Из интересных подходов я бы еще порекомендовал вот эту статью. Автор пытался реализовать частичный запуск $digest для скоупа (что бы просмотр изменений не распрастранялся выше по $scope, а только на дочерние айтемы. Из эксперементов выходил неплохой профит при использовании в контексте ng-repeat + много элементов с навешанными директивами, использующими изолированные скоупы).
              • 0
                Раскройте, пожалуйста, смысл фраз «Меньше юзать скоуп» и «слабое место это $scope» с точки зрения производительности.
                • 0
                  Ну по сути производительность падает изза запуска $apply/$digest, которые запускают ватчеры и т.д. Нужно стараться делать все так, что бы количество циклов $digest было наименьшим. Так же не стоит использовать dirty checking, ибо при этом будет неплохо проседать производительность. Опять же все зависит от задачи, в некоторых случаях падения производительности можно и не заметить, но если у вас будут часто меняться данные в $scope и после каждого изменения прогоняться $digest, то вы сразу все заметите. Скажем стандартные директивы аля ng-keyup или что-то в этом духе на каждое нажатие клавиши вызывает $digest, причем обновляться будет все от $rootScope и ниже, все приложение. Производительность при этом будет падать линейно в зависимости от количества ватчеров и данных, находящихся в $scope.
                  • 0
                    Вы повторно пересказали остальные части своего предыдущего коммента. C $apply()/$digest() и количеством вотчеров все понятно. Меня именно процитированные фразы смутили.
                    • 0
                      многое из того что пихают в $scope можно туда не пихать. По сути все сводится к уменьшению количества и сложности ватчеров, что бы сократить длительность цикла $digest и общее их количество. Например, не нужно использовать директивы аля ng-keyup/ng-keydown для своих директив, лучше использовать просто ивент листенеры, и вызывать $digest только когда это действительно нужно.
                      • –1
                        Да, безусловно, пихать в $scope все подряд не нужно. Правда на производительности это, по-большому счету, никак не сказывается. Это уже скорее про архитектуру.
                        • 0
                          Я не верно выразился, под «пихают» я имел ввиду что слишком сильно завязывают на $scope, вплоть до того что через него обрабатывают нажатия клавишь клавиатуры, позиция курсора и т.д.
            • +2
              Это же перевод… Написали бы развернутую статью о использовании выражений, нюансах с наследованием скоупов и т.д.
              • +2
                Честно говоря, я сам сейчас в процессе изучения документации, поэтому нюансы будут позже. Я как бы совмещаю приятное с полезным, почитываю туториалы, решил перевести серию с scotch.io
              • 0
                Спасибо за статью :)
                Иногда быстро найти слишком простую с точки зрения разработчика информацию и ее днем с огнем не сыщешь потому что «это элементарно» :)
            • +1
              А я использую ng-if, что, зачастую, ускоряет приложение в разы.
              • 0
                Иногда вставка узла вызывает притормаживание, ввиду этого местами его заменяю другими методами управления отображением.

              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.