Как стать автором
Обновить

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

Время на прочтение 3 мин
Количество просмотров 52K
Сегодня мы посмотрим на то, как можно использовать директивы 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
Теги:
Хабы:
+6
Комментарии 18
Комментарии Комментарии 18

Публикации

Истории

Работа

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн