「AngularJS入門」ng-openディレクティブのサンプル

2021年2月18日

書式
<DETAILS ng-open="{表現式}">
使用例

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="">
　detailsリストをクリックしてください: <input type="checkbox" ng-model="listDetails"><br>
<br>
<details ng-open="listDetails">
<summary>AAA</summary>
<p> BBB</p>
</details>
<p><b>notice：</b> Opera, Chromeと Safari　サポート</p>
</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=""> 　detailsリストをクリックしてください: <input type="checkbox" ng-model="listDetails"><br> <br> <details ng-open="listDetails"> <summary>AAA</summary> <p> BBB</p> </details> <p><b>notice：</b> Opera, Chromeと Safari　サポート</p> </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="">
　detailsリストをクリックしてください: <input type="checkbox" ng-model="listDetails"><br>
<br>
<details ng-open="listDetails">
  <summary>AAA</summary>
      <p> BBB</p>
</details>
<p><b>notice：</b> Opera, Chromeと Safari　サポート</p>
</body>
</html>

 

関連投稿:

  1. 「AngularJS」ng-cutディレクティブを使うサンプル
  2. 「AngularJS」ng-disabledディレクティブのサンプル
  3. 「AngularJS入門」ng-readonlyで属性を読み取り専用に設定するサンプル
  4. 「AngularJS」ngRepeatディレクティブを使うサンプル

AngularJS

Posted by arkgame