「AngularJS入門」ngHideディレクティブを使うサンプル

書式
<div ng-hide="myValue" class="ng-hide"></div>
ngHideディレクティブは、ngHide属性に提供された式を元に、HTML要素を表示または非表示にします。
使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="">
HTML要素を非表示: <input type="checkbox" ng-model="cftVar">
<div ng-hide="cftVar">
<h1>code change world</h1>
<p>study skill in arkgame.com </p>
</div>
</body>
</html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app=""> HTML要素を非表示: <input type="checkbox" ng-model="cftVar"> <div ng-hide="cftVar"> <h1>code change world</h1> <p>study skill in arkgame.com </p> </div> </body> </html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="">

HTML要素を非表示: <input type="checkbox" ng-model="cftVar">

<div ng-hide="cftVar">
<h1>code change world</h1>
<p>study skill in arkgame.com </p>
</div>

</body>
</html>

 

AngularJS

Posted by arkgame