AngularJS改變元素顯示狀態(tài)
前言
本文描述使用AngularJS提供的ng-show和ng-hide指令實(shí)現(xiàn)自動(dòng)監(jiān)聽某布爾型變量來改變元素顯示狀態(tài)。
控制html元素顯示和隱藏有n種方法：html的hidden、css的display、jQuery的hide()和show()、bootstrap的.hide。今天的重點(diǎn)不是顯示和隱藏，而是監(jiān)聽某個(gè)布爾變量值，自動(dòng)改變元素顯示和隱藏狀態(tài)。監(jiān)聽函數(shù)、if判斷、選擇dom、設(shè)置dom，5行代碼搞不定吧，而且毫無技術(shù)含量。
實(shí)例1
<body>
<div ng-controller="VisibleController">
<p ng-show="visible">字符串1</p>
<p ng-hide="visible">字符串2</p>
<button ng-click="toggle()">切換</button>
</div>
<script src="../lib/angularjs/1.2.26/angular.min.js"></script>
<script>
function VisibleController($scope) {
$scope.visible = false;
$scope.toggle = function () {
$scope.visible = !$scope.visible;
}
}
</script>
</body>
兩個(gè)指令很簡單，只是ng-show在true時(shí)顯示，false時(shí)隱藏，而ng-hide效果相反。
對(duì)于菜單、上下文敏感的工具以及很多其他情況來說，顯示和隱藏元素是一項(xiàng)核心的功能。與Angualr中其他功能一樣，Angular是通過修改數(shù)據(jù)模型的方式來驅(qū)動(dòng)UI刷新，然后通過指令把變更反應(yīng)到UI上。
ng-show和ng-hide這兩條指令的功能是等價(jià)的，但是運(yùn)行效果正好相反，我們都可以根據(jù)所傳遞的表達(dá)式來顯示或隱藏元素。也就是說，ng-show在表達(dá)式為true時(shí)將會(huì)顯示元素，為false時(shí)將會(huì)隱藏元素；而ng-hide則恰好相反。
工作原理
這兩條指令的工作原理是：根據(jù)實(shí)際情況把元素的樣式設(shè)置為display:block來顯示元素；設(shè)置為display:none來隱藏元素。
實(shí)例2
<body ng-controller='ShowController'>
<button ng-click="toggleMenu()">Toggle Menu</button>
<ul ng-show='menuState.show'>
<li>Stun</li>
<li>Disintegrate</li>
<li>Erase from history</li>
</ul>
<script src="lib/angular/angular.js"></script>
<script>
var myApp=angular.module('myApp',[]) myApp.controller('ShowController',function($scope) {$scope.menuState={show: false},$scope.toggleMenu=function() {$scope.menuState.show=!$scope.menuState.show;}});
</script>
</body>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
微信+angularJS的SPA應(yīng)用中用router進(jìn)行頁面跳轉(zhuǎn)，jssdk校驗(yàn)失敗問題解決
本文主要介紹微信+angularJS的SPA應(yīng)用中用router進(jìn)行頁面跳轉(zhuǎn)，jssdk校驗(yàn)失敗問題解決，這里提供了詳細(xì)的操作方式，有需要的小伙伴可以參考下2016-09-09
angular8.5集成TinyMce5的使用和詳細(xì)配置(推薦)
這篇文章主要介紹了angular8.5集成TinyMce5的使用和詳細(xì)配置,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-11-11
Angularjs 雙向綁定時(shí)字符串的轉(zhuǎn)換成數(shù)字類型的問題
這篇文章主要介紹了Angular js雙向綁定時(shí)字符串的轉(zhuǎn)換成數(shù)字類型的問題,需要的朋友可以參考下2017-06-06
angular.js指令中的controller、compile與link函數(shù)的不同之處
最近一位大神問了我angular.js指令中的controller、compile與link函數(shù)的不同，想了想居然回答不出來，所以必須要深入的探究下，下面這篇文章主要介紹了關(guān)于angular.js指令中的controller、compile與link函數(shù)的不同之處，需要的朋友可以參考下。2017-05-05
Angularjs之ngModel中的值驗(yàn)證綁定方法
今天小編就為大家分享一篇Angularjs之ngModel中的值驗(yàn)證綁定方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
AngularJS實(shí)現(xiàn)標(biāo)簽頁的兩種方式
這篇文章分別給大家介紹了AngularJS實(shí)現(xiàn)標(biāo)簽頁的兩種方式，一種是通過普通指令實(shí)現(xiàn)標(biāo)簽頁，另外一種是通過自定義指令實(shí)現(xiàn)的標(biāo)簽頁，有需要的朋友們可以來參考借鑒，下面來一起看看吧。2016-09-09
詳解angular分頁插件tm.pagination二次觸發(fā)問題解決方案
這篇文章主要介紹了詳解angular分頁插件tm.pagination二次觸發(fā)問題解決方案，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
Angularjs在初始化未完畢時(shí)出現(xiàn)閃爍問題的解決方法分析
這篇文章主要介紹了Angularjs在初始化未完畢時(shí)出現(xiàn)閃爍問題的解決方法,結(jié)合實(shí)例形式分析了3種常用的閃爍問題解決方法,需要的朋友可以參考下2016-08-08
本篇文章主要介紹了Angular 如何使用第三方庫的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
angular route中使用resolve在uglify壓縮后問題解決
這篇文章主要介紹了angular route中使用resolve在uglify壓縮后問題解決的相關(guān)資料,需要的朋友可以參考下2016-09-09