快捷導(dǎo)航

AngularJS改變?cè)仫@示狀態(tài)

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

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

前言

本文描述使用AngularJS提供的ng-show和ng-hide指令實(shí)現(xiàn)自動(dòng)監(jiān)聽(tīng)某布爾型變量來(lái)改變?cè)仫@示狀態(tài)。

控制html元素顯示和隱藏有n種方法：html的hidden、css的display、jQuery的hide()和show()、bootstrap的.hide。今天的重點(diǎn)不是顯示和隱藏，而是監(jiān)聽(tīng)某個(gè)布爾變量值，自動(dòng)改變?cè)仫@示和隱藏狀態(tài)。監(jiān)聽(tīng)函數(shù)、if判斷、選擇dom、設(shè)置dom，5行代碼搞不定吧，而且毫無(wú)技術(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è)指令很簡(jiǎn)單，只是ng-show在true時(shí)顯示，false時(shí)隱藏，而ng-hide效果相反。

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

ng-show和ng-hide這兩條指令的功能是等價(jià)的，但是運(yùn)行效果正好相反，我們都可以根據(jù)所傳遞的表達(dá)式來(lái)顯示或隱藏元素。也就是說(shuō)，ng-show在表達(dá)式為true時(shí)將會(huì)顯示元素，為false時(shí)將會(huì)隱藏元素；而ng-hide則恰好相反。

工作原理

這兩條指令的工作原理是：根據(jù)實(shí)際情況把元素的樣式設(shè)置為display:block來(lái)顯示元素；設(shè)置為display:none來(lái)隱藏元素。

實(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>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: