快捷導(dǎo)航

AngularJS改變元素顯示狀態(tài)

更新時間：2017年04月20日 09:36:34 作者：孫華強(qiáng)

本文主要介紹使用AngularJS提供的ng-show和ng-hide指令實(shí)現(xiàn)自動監(jiān)聽某布爾型變量來改變元素顯示狀態(tài)。下面跟著小編一起來看下吧

前言

本文描述使用AngularJS提供的ng-show和ng-hide指令實(shí)現(xiàn)自動監(jiān)聽某布爾型變量來改變元素顯示狀態(tài)。

控制html元素顯示和隱藏有n種方法：html的hidden、css的display、jQuery的hide()和show()、bootstrap的.hide。今天的重點(diǎn)不是顯示和隱藏，而是監(jiān)聽某個布爾變量值，自動改變元素顯示和隱藏狀態(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>

兩個指令很簡單，只是ng-show在true時顯示，false時隱藏，而ng-hide效果相反。

對于菜單、上下文敏感的工具以及很多其他情況來說，顯示和隱藏元素是一項(xiàng)核心的功能。與Angualr中其他功能一樣，Angular是通過修改數(shù)據(jù)模型的方式來驅(qū)動UI刷新，然后通過指令把變更反應(yīng)到UI上。

ng-show和ng-hide這兩條指令的功能是等價的，但是運(yùn)行效果正好相反，我們都可以根據(jù)所傳遞的表達(dá)式來顯示或隱藏元素。也就是說，ng-show在表達(dá)式為true時將會顯示元素，為false時將會隱藏元素；而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)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章:

相關(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ì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-11-11
Angularjs 雙向綁定時字符串的轉(zhuǎn)換成數(shù)字類型的問題
這篇文章主要介紹了Angular js雙向綁定時字符串的轉(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)證綁定方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
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ā)問題解決方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-07-07
Angularjs在初始化未完畢時出現(xiàn)閃爍問題的解決方法分析
這篇文章主要介紹了Angularjs在初始化未完畢時出現(xiàn)閃爍問題的解決方法,結(jié)合實(shí)例形式分析了3種常用的閃爍問題解決方法,需要的朋友可以參考下
2016-08-08
Angular 如何使用第三方庫的方法
本篇文章主要介紹了Angular 如何使用第三方庫的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-04-04
angular route中使用resolve在uglify壓縮后問題解決
這篇文章主要介紹了angular route中使用resolve在uglify壓縮后問題解決的相關(guān)資料,需要的朋友可以參考下
2016-09-09