suchen

Heim >Web-Frontend >js-Tutorial >AngularJS ng-hide-Direktive

AngularJS ng-hide-Direktive

黄舟
黄舟Original
2017-02-16 13:30:461420Durchsuche

1. Problemhintergrund

Die ng-hide-Direktive von AngularJS blendet HTML-Elemente aus, wenn ihr Wert „true“ ist; wenn ihr Wert „false“ ist, werden HTML-Elemente angezeigt


2. Implementierungsquellcode

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>AngularJS之ng-hide指令</title>
		<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
	</head>
	<body>
		<p ng-app="" ng-init="flag=true">
			<button ng-hide="flag">查询</button><br>
			<input type="checkbox" ng-model="flag" />老鼠<br>
			<input type="radio" ng-hide="!flag" />猫<br>
			<label>{{flag}}</label>
		</p>
	</body>
</html>


3. Realisierungsergebnis


(1) Aktivieren Sie das Kontrollkästchen

Schaltfläche ist ausgeblendet, Optionsfeld wird angezeigt

AngularJS ng-hide-Direktive

(2) Deaktivieren Sie das Kontrollkästchen

Schaltfläche wird angezeigt, Optionsschaltfläche ist ausgeblendet

> Das Obige ist der Inhalt der ng-hide-Anweisung von AngularJS. Weitere verwandte Inhalte finden Sie hier die chinesische PHP-Website (www.php.cn)! AngularJS ng-hide-Direktive

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Erweiterte Front-End-Grundlagen (4): Detaillierte Darstellung der Scope-Kette und des AbschlussesNächster Artikel：Erweiterte Front-End-Grundlagen (4): Detaillierte Darstellung der Scope-Kette und des Abschlusses

In Verbindung stehende Artikel

Mehr sehen