舉例詳解AngularJS中ngShow和ngHide的使用方法
今天我們來看看怎樣使用Angular的ngShow 和ngHide 指令來完成它們聽起來應(yīng)該完成的,顯示和隱藏!
它們應(yīng)該做的事
ngShow 和ngHide 允許我們顯示或隱藏不同的元素。這有助于創(chuàng)建Angular應(yīng)用時因為我們的單頁程序會有許多的移動部件隨著應(yīng)用狀態(tài)的改變而來來去去。
這些指令的最偉大的部分就是我們不必使用CSS或者JS來操作顯示還是隱藏。這些都是由老練的Angular來完成。
用法
想使用ngShow 或ngHide, 只需將指令添加到你想要顯示或者隱藏的元素上即可。
<!-- FOR BOOLEAN VALUES =============================== --> <!-- for true values --> <div ng-show="hello">this is a welcome message</div> <!-- can also show if a value is false --> <div ng-show="!hello">this is a goodbye message</div> <!-- FOR EXPRESSIONS =============================== --> <!-- show if the appState variable is a string of goodbye --> <div ng-show="appState == 'goodbye'">this is a goodbye message</div> <!-- FOR FUNCTIONS =============================== --> <!-- use a function defined in your controller to evaluate if true or false --> <div ng-hide="checkSomething()"></div>
一旦我們設(shè)置了我們標(biāo)記,我們可以多種方式設(shè)置hello或者goodbye。你可以將它設(shè)置到你的Angular控制器里并且讓你的div在應(yīng)用加載的時候顯示或隱藏。
上面的這些都可以用于ng-show或者ng-hide。如果值或表達(dá)式或函數(shù)返回true,則會隱藏一些東西。
用作布爾值
我們將創(chuàng)建使用ng-click的鏈接,并切換goCats的值為true或false。
<a href ng-click="goCats = !goCats">Toggle Cats</a>
然后我們可以使用ng-show來顯示或隱藏分類圖像。
<img ng-src="http://i.imgur.com/vkW3Lhe.jpg" ng-show="goCats">
ng-src 我們使用ng-src來調(diào)用圖片,這樣的話Angular將在實例化及檢查圖像時確認(rèn)是否將其隱藏。如果我們不這樣的話,圖片會在站點加載時彈出來,直到Angular意識到應(yīng)該將其隱藏。
判斷表達(dá)式
在這里我們來判斷一個從輸入框傳來的字符串,我們把ng-mode綁定在一個輸入框的里面并命名為aminal變量,并根據(jù)這個變量的內(nèi)容來顯示不同的圖片。
下面我們會把我們的變量名焦作aminal。
<input type="text" ng-model="aminal">
然后我們會使用ng-show來對字符串進(jìn)行判斷。
<img ng-src="http://i.imgur.com/vkW3Lhe.jpg" ng-show="aminal == 'cat'">
使用方法
我們會做一個簡單的檢查來判斷輸入的是奇數(shù)還是偶數(shù)。 我們會創(chuàng)建一個方法在我們的AngularJS文件中:
// set the default value of our number $scope.myNumber = 0; // function to evaluate if a number is even $scope.isEven = function(value) { if (value % 2 == 0) return true; else return false; };
方法創(chuàng)建完成之后, 我們接下來要做的就是通過ng-show或者ng-hide來使用它,并傳入我們的數(shù)字。通過方法傳數(shù)字這種方法,可以保持Angular控制整潔和可測試。
<!-- show if our function evaluates to false --> <div ng-show="isEven(myNumber)"> <h2>The number is even.</h2> </div> <!-- show if our function evaluates to false --> <div ng-show="!isEven(myNumber)"> <h2>The number is odd.</h2> </div>
結(jié)論
有了這兩個方向的指引,我們的應(yīng)用會有很大的改觀. 而這些只是基于 布爾值, 表達(dá)式, 以及 函數(shù),實現(xiàn)的元素顯示和隱藏功能 但這三種模式將能應(yīng)用到更多的場景.
相關(guān)文章
AngularJS基礎(chǔ)學(xué)習(xí)筆記之控制器
在AngularJS中,控制器是一個Javascript函數(shù)(類型/類),用來增強(qiáng)除了根作用域意外的作用域?qū)嵗摹.?dāng)你或者AngularJS本身通過<code>scope.$new</code>倆創(chuàng)建一個新的子作用域?qū)ο髸r,有一個選項能讓你將它當(dāng)做參數(shù)傳遞給控制器。2015-05-05Angular 4根據(jù)組件名稱動態(tài)創(chuàng)建出組件的方法教程
組件是我們在學(xué)習(xí)angular中必不可少的一部分,下面這篇文章主要給大家介紹了關(guān)于Angular 4如何根據(jù)組件名稱動態(tài)創(chuàng)建出組件的相關(guān)資料,文中通過圖文與示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來一起看看吧。2017-11-11AngularJS入門教程之路由機(jī)制ngRoute實例分析
這篇文章主要介紹了AngularJS入門教程之路由機(jī)制ngRoute,結(jié)合實例形式分析了AngularJS路由機(jī)制的原理、ngRoute的組成、配置、參數(shù)與相關(guān)使用技巧,需要的朋友可以參考下2016-12-12解析AngularJS中g(shù)et請求URL出現(xiàn)的跨域問題
本文主要介紹了AngularJS中g(shù)et請求URL出現(xiàn)跨域問題。需要的朋友可以參考下2016-12-12Angular2 自定義validators的實現(xiàn)方法
angular 當(dāng)需要form表單需要驗證時,angular自帶了許多校驗器,但是很多時候自帶的無法滿足業(yè)務(wù)需求,這時候就需要自定義的校驗器,下面通過本文給大家分享Angular2 自定義validators的實現(xiàn)方法,需要的朋友參考下吧2017-07-07angular2 ng build部署后base文件路徑問題詳細(xì)解答
本篇文章主要介紹了angular2 ng build部署后base文件路徑問題詳細(xì)解答,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07AngularJS 雙向數(shù)據(jù)綁定詳解簡單實例
這篇文章主要介紹了AngularJS 雙向數(shù)據(jù)綁定詳解簡單實例的相關(guān)資料,需要的朋友可以參考下2016-10-10