AngularJS HTML DOM

AngularJS tarjoaa ohjeita, jotka voivat sidottaa sovelluksen tiedot HTML DOM-elementin ominaisuuksiin.

ng-disabled ohje

ng-disabled Ohje sidottaa AngularJS sovelluksen tiedot HTML-elementin disabled-ominaisuuteen.

AngularJS esimerkki

<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">Click me!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch">Button
</p>
<p>
{{ mySwitch }}
</p>
</div>

Kokeile itse

Käyttöohje:

ng-disabled Ohje soveltaa sovelluksen tietoja mySwitch sidottaa HTML painikkeen disabled ominaisuuteen.

ng-model Ohje sidottaa HTML valintaruudun arvon mySwitch arvon päällä.

Jos mySwitch arvon trueJos niin, painike aktivoidaan:

<p>
<button disabled>Click me!</button>
</p>

Jos mySwitch arvon falseJos niin, painiketta ei aktivoida:

<p>
<button>Click me!</button>
</p>

ng-show ohje

ng-show Ohje näyttää tai piilottaa HTML-elementin.

AngularJS esimerkki

<div ng-app="">  
<p ng-show="true">Olen näkyvä.</p>  
<p ng-show="false">En ole näkyvä.</p>  
</div>

Kokeile itse

ng-show Ohjaus perustuu ng-show:nArvoNäytä (tai piilota) HTML-elementit.

Voit käyttää mitä tahansa arvioidaan totiseksi tai epätotiseksi lauseketta:

AngularJS esimerkki

<div ng-app="" ng-init="hour=13">
<p ng-show="hour > 12">Olen näkyvä.</p>
</div>

Kokeile itse

Seuraavassa luvussa tarjotaan lisää esimerkkejä siitä, miten HTML-elementit voidaan piilottaa tai näyttää napin klikkaamisen avulla.

ng-hide ohjaus

ng-hide Ohjaus piilottaa tai näyttää HTML-elementit.

AngularJS esimerkki

<div ng-app="">  
<p ng-hide="true">En ole näkyvä.</p>  
<p ng-hide="false">Olen näkyvä.</p>  
</div>

Kokeile itse