Zobrazit a skrýt funkce pomocí AngularJS

AngularJS nám umožňuje integrovat různé změny v uživatelském rozhraní se změnami v modelu, čímž můžeme upravit prvky jako např nabídky, seznamy, odkazy atd.., tímto způsobem dosáhneme více interaktivního a dynamického zážitku.
Jedním z nejpoužívanějších efektů je zobrazování a skrývání, protože jednoduchým způsobem zobrazujeme nebo nezobrazujeme možnosti v nabídce podle akcí uživatele nebo modelu, AngularJS nám to umožňuje jednoduchým způsobem začlenit do směrnic ng-shgow Y ng-skrýt.
Pokud je naše aplikace složitá, určitě budeme mít prvky citlivé na kontext, to znamená, že můžeme použít nástroj, pokud jsou splněny správné podmínky, nebo bychom měli při splnění určitých podmínek skrýt některé možnosti nabídky.
ng-show a ng-hideTo díky AngularJS Je velmi snadné toho dosáhnout, proto použijeme směrnice ng-show Y ng-skrýt, které mají například reverzní provoz každého z nich ng-show zobrazí prvek, pokud je jeho podmínka pravdivá, pokud je nepravdivý, skryje jej a ng-skrýt skryje prvek, pokud je splněna jeho podmínka, jinak jej zobrazí.
Takže s těmito operacemi je naše logika ta, která bude určovat, kterou z nich použijeme v našich aplikacích, tyto směrnice fungují tak, že pracují se styly prvků, kde jsou použity, takže pokud pracujeme s vlastnostmi displej: blok ukázat a displej: žádný skrývat, protože nevidíme nic, co nevíme nebo co je příliš složité na to, abychom se to nenaučili.
V následujícím příkladu budeme pracovat tak, že zobrazíme nabídku nebo ne, pokud klikneme na možnost, která ji ovládá, musíme provést následující:
1- V souboru HTML zahrneme AngularJS a poté vygenerujeme ovladač, který nám pomůže v našem úkolu, kód ovladače musí ovládat akce v nabídce a měl by funkci nebo metodu, která provede změnu při práci se stavy směrnice, v tomto případě budeme pracovat s ng-show, podívejme se na potřebný kód:

 funkce ShowHideController ($ scope) {$ scope.menuState = {} $ scope.menuState.show = false; $ scope.cambiarMenu = funkce () {$ scope.menuState.show =! $ scope.menuState.show; }; } 

2– Poté musíme připravit prvky HTML, abychom mohli směrnici použít AngularJSZa tímto účelem definujeme $ rozsah správce a nakonec aplikujeme směrnici ng-show do seznamu, podívejme se:

Změnit nabídku 
 
akce 1
akce 2
akce 3

Díky tomu by se naše nabídka měla zobrazit nebo skrýt, když klikneme na odpovídající tlačítko. Podívejme se, jak to vypadá v našem prohlížeči v obou stavech. Zde vidíme počáteční stav bez položek nabídky:

Poté kliknutím na tlačítko vidíme, jak se nabídka zobrazuje, níže je kód, který naše konzola detekuje Javascript předvést fungování AngularJS:

Všimli jsme si, že v kódu konzoly třída zmizela ng-skrýt tak vám umožní správně zobrazit nabídku.
Tímto jsme dokončili tento tutoriál, kde jsme se naučili používat vlastnosti show a hide při vytváření aplikace v AngularJS.Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod