Функции за показване и скриване с AngularJS

AngularJS ни позволява да интегрираме различните промени в потребителския интерфейс с промените в модела, с това можем да коригираме елементи като напр менюта, списъци, връзки и др.., по този начин постигаме по -интерактивно и динамично изживяване.
Един от най -използваните ефекти е показването и скриването, тъй като по прост начин правим опциите в менюто да се показват или не според действията на потребителя или модела, AngularJS ни позволява да го включим по прост начин с директивите ng-shgow Y ng-hide.
Ако нашето приложение е сложно, със сигурност ще имаме елементи, които са чувствителни към контекста, тоест можем да използваме инструмент, ако са изпълнени правилните условия или може би трябва да скрием някои опции от менюто, когато са изпълнени определени условия.
ng-show и ng-hideТова благодарение на AngularJS Това е много лесно за постигане, за това ще използваме директивите ng-шоу Y ng-hide, които имат обратна операция на всяка, например ng-шоу ще показва елемента, стига условието му да е вярно, ако е невярно, ще го скрие и ng-hide той ще скрие елемента, стига условието му да е вярно, в противен случай ще го покаже.
Така че с тези операции нашата логика е тази, която ще диктува коя ще използваме в нашите приложения, тези директиви работят, като работят със стиловете на елементите, където са приложени, така че ако работим със свойствата дисплей: блок да покаже и дисплей: няма да скрием, тъй като не виждаме нищо, което не знаем или е твърде сложно, за да не го научим.
В следния пример ще работим, като направим меню или не, ако кликнем върху опция, която го контролира, за това трябва да направим следното:
1- Във файл HTML ще включим AngularJS и след това ще генерираме контролера, който ще ни помогне в нашата задача, кодът на контролера трябва да контролира действията на менюто и би имал функция или метод, който прави промяната при работа със състоянията на директивата, в този случай ще работи с ng-шоу, нека видим необходимия код:

 функция ShowHideController ($ scope) {$ scope.menuState = {} $ scope.menuState.show = false; $ scope.cambiarMenu = function () {$ scope.menuState.show =! $ scope.menuState.show; }; } 

2- След това трябва да подготвим нашите HTML елементи, за да можем да приложим директивата AngularJS, за това дефинираме $ обхват на контролера и накрая прилагаме директивата ng-шоу към списъка, нека видим:

Промяна на менюто 
 
действие 1
действие2
действие 3

С това менюто ни трябва да се показва или скрива, докато кликваме върху съответния бутон, нека видим как изглежда в нашия браузър и в двете състояния. Тук можем да видим първоначалното състояние без елементи от менюто:

След това, като кликнете върху бутона, можем да видим как се появява менюто, по -долу е кодът, който нашата конзола открива Javascript да демонстрира работата на AngularJS:

Забелязахме, че в конзолния код класът изчезна ng-hide като по този начин можете да видите менюто правилно.
С това завършваме този урок, в който се научихме да използваме показването и скриването на свойствата, когато изграждаме приложение AngularJS.Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка