AngularJS基礎(chǔ) ng-open 指令簡單實例
AngularJS ng-open 指令
AngularJS 實例
通過點擊 checkbox 顯示或隱藏 <details> 列表:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app=""> 點擊這里顯示 details 列表: <input type="checkbox" ng-model="showDetails"><br> <br> <details ng-open="showDetails"> <summary>學(xué)的不僅是技術(shù),更是夢想!</summary> <p> - 菜鳥教程</p> </details> <p><b>注意:</b> 目前只有 Opera, Chrome, 和 Safari 瀏覽器支持 details 標(biāo)簽。</p> </body> </html>
定義和用法
ng-open 指令用于設(shè)置 details 列表的 open 屬性。
如果 ng-open 的表達(dá)式返回 true 則 details 列表是可見的。
語法
<details ng-open="expression">...</details>
<details> 元素支持該指令。
參數(shù)值
值 | 描述 |
---|---|
expression | 如果表達(dá)式為 true 則會設(shè)置 details 的 open 屬性。 |
以上就是對AngularJS ng-open 指令的資料整理,后續(xù)繼續(xù)補充。
- AngularJS基礎(chǔ) ng-selected 指令簡單示例
- AngularJS基礎(chǔ) ng-repeat 指令簡單示例
- AngularJS基礎(chǔ) ng-readonly 指令簡單示例
- AngularJS基礎(chǔ) ng-paste 指令簡單示例
- AngularJS基礎(chǔ) ng-options 指令詳解
- AngularJS基礎(chǔ) ng-non-bindable 指令詳細(xì)介紹
- AngularJS基礎(chǔ) ng-mouseover 指令簡單示例
- AngularJS基礎(chǔ) ng-mousemove 指令簡單示例
- AngularJS基礎(chǔ) ng-mouseleave 指令詳解
- AngularJS基礎(chǔ) ng-show 指令簡單示例
相關(guān)文章
angular內(nèi)置provider之$compileProvider詳解
下面小編就為大家?guī)硪黄猘ngular內(nèi)置provider之$compileProvider詳解。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09angularjs1.5 組件內(nèi)用函數(shù)向外傳值的實例
今天小編就為大家分享一篇angularjs1.5 組件內(nèi)用函數(shù)向外傳值的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09AngularJS學(xué)習(xí)筆記(三)數(shù)據(jù)雙向綁定的簡單實例
這篇文章主要介紹了AngularJS學(xué)習(xí)筆記(三)數(shù)據(jù)雙向綁定的簡單實例,詳解數(shù)據(jù)雙向綁定實例的相關(guān)資料,需要的朋友可以參考下。2016-11-11Angular通過?HTTP?Interceptor?實現(xiàn)?HTTP?請求超時監(jiān)控的例子
這篇文章主要介紹了Angular?如何通過?HTTP?Interceptor?實現(xiàn)?HTTP?請求的超時監(jiān)控,本文通過例子給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-06-06詳解angular分頁插件tm.pagination二次觸發(fā)問題解決方案
這篇文章主要介紹了詳解angular分頁插件tm.pagination二次觸發(fā)問題解決方案,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-07