資訊專欄INFORMATION COLUMN
摘要：從今天開始寫博，記錄下自己技術(shù)發(fā)展的點滴吧。相比另外兩種，類型的表達式就有優(yōu)勢。缺點是多了，寫起來挺麻煩的第三種，表達式為這里中的每個元素都綁定了一個的輸入值，實際上每個元素都使用了類型的值中元素可以為或者，中對的規(guī)則同上。
從今天開始寫博，記錄下自己技術(shù)發(fā)展的點滴吧。
一、什么是ng-classng-class是AngularJS預(yù)設(shè)的一個指令(directive)，通過這個指令能夠?qū)tml元素的類(class)進行動態(tài)地設(shè)置。
二、在什么場景下用ng-class在需要動態(tài)修改html元素的時候...所以其實這個問題等價于什么時候需要動態(tài)修改html元素的類？
在個人淺薄的編程經(jīng)驗中......需要動態(tài)修改html元素的類的時候基本是需要改變html元素的“表現(xiàn)”的時候。
舉個栗子，在css中設(shè)置
.hidden{
display:none;
}
那么需要隱藏一個元素的時候，對元素添加hidden類即可
再舉個栗子，一個關(guān)閉按鈕，有兩種狀態(tài)，可用與不可用，那么你可以在css中設(shè)置
/* 正常的關(guān)閉按鈕 */
.btn-close{
background-image:url(images/btn-close.png)
}
/* 不可用的關(guān)閉按鈕 */
.btn-close-disabled{
background-image:url(images/btn-close-disabled.png)
}
這樣通過動態(tài)設(shè)置 btn-close 和 btn-close-disabled 兩個類，你就可以方便地修改按鈕的外觀了，是不是很神奇，很牛X......扯遠了, 估計大神們已經(jīng)在"呵呵"...回到正題
三、怎么用ng-class其實AngularJS官方給的API給出的例子很詳細，請戳這里
可以先看下Example中的style.css，定義了五種class
/* 對文本添加刪除線 */
.strike {
text-decoration: line-through;
}
/* 加粗文本 */
.bold {
font-weight: bold;
}
/* 文本字體設(shè)置為紅色 */
.red {
color: red;
}
/* 錯誤文本的樣式。紅色字體，黃色背景 */
.has-error {
color: red;
background-color: yellow;
}
/* 文本字體設(shè)置為橘色 */
.orange {
color: orange;
}
ng-class的用法就是在html元素中設(shè)置ng-class="expression"，這個expression(表達式)可以為string，object，array三種類型
Example中index.html中展示了ng-class的三種用法，分別來看一下
Map Syntax Example
對象中的key-value對，key表示的是class的名稱，value表示的是該html元素是否有這個 calss， 如果value為true，那么html元素就屬于這個class，如果value為false，那么html元素就不屬于這個class。具體的html外觀表現(xiàn)就不截圖了，大家可以自己試驗。
在元素的class比較多的時候。相比另外兩種，object類型的表達式就有優(yōu)勢。因為拼字符串是很煩的~
Using String Syntax
例子中將ng-class 綁定到了input的輸入值上。實際上可以通過修改$scope.style的值設(shè)置ng-class。
這種方式的優(yōu)點就是簡單、粗暴。缺點是class多了，寫起來挺麻煩的
Using Array Syntax
這里array中的每個元素都綁定了一個input的輸入值，實際上每個元素都使用了string類型的值
Using Array and Map Syntax
array中元素可以為string 或者object，object中key-value對的規(guī)則同上。array類型還是很強大的。。。
發(fā)現(xiàn)寫博客還是蠻累人的，竟然寫了一個小時....sign...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/91612.html
摘要：但是有一點不好的只能夠讓一個元素擁有兩種狀態(tài)，雖然這么說基本也是滿足所需了，我一般都用這個。簡單直觀對于第二種方式我曾經(jīng)有疑惑這到底是什么用法這并非的用法，而是的技巧。 原文出處：https://segmentfault.com/a/11... 在開發(fā)中我們通常會遇到一種需求：一個元素在不同的狀態(tài)需要展現(xiàn)不同的樣子。 而在這所謂的樣子當然就是改變其css的屬性，而實現(xiàn)能動態(tài)的改變其屬性...
摘要：但是有一點不好的只能夠讓一個元素擁有兩種狀態(tài)，雖然這么說基本也是滿足所需了，我一般都用這個。簡單直觀對于第二種方式我曾經(jīng)有疑惑這到底是什么用法這并非的用法，而是的技巧。 原文出處：https://segmentfault.com/a/11... 在開發(fā)中我們通常會遇到一種需求：一個元素在不同的狀態(tài)需要展現(xiàn)不同的樣子。 而在這所謂的樣子當然就是改變其css的屬性，而實現(xiàn)能動態(tài)的改變其屬性...
摘要：但是有一點不好的只能夠讓一個元素擁有兩種狀態(tài)，雖然這么說基本也是滿足所需了，我一般都用這個。簡單直觀對于第二種方式我曾經(jīng)有疑惑這到底是什么用法這并非的用法，而是的技巧。 原文出處：https://segmentfault.com/a/11... 在開發(fā)中我們通常會遇到一種需求：一個元素在不同的狀態(tài)需要展現(xiàn)不同的樣子。 而在這所謂的樣子當然就是改變其css的屬性，而實現(xiàn)能動態(tài)的改變其屬性...
摘要：總的來說，收獲很大。這里這里就以一些常用的標簽談?wù)勚械幕A(chǔ)知識。然后還有一個表示記錄的索引號，從開始。已經(jīng)用這個數(shù)組的值替他們分好了組了，是不是感覺很強大，還有很多強大的地方等著我們?nèi)W(xué)習(xí)，掌握它，還有更強大的等著我們。 周三的時候跟著老師簡單的入門了angularjs，然后去圖書館找了一本《Angularjs實戰(zhàn)》來看了看，雖然這本書網(wǎng)上的評價不太高，但對于初學(xué)者的我來說還是不錯的，...
流行框架 簡介 angularjs是一款非常優(yōu)秀的前端高級JS框架，由谷歌團隊開發(fā)維護，能夠快速構(gòu)建單頁web應(yīng)用，化繁為簡 無論是angularjs還是jQuery都是用原生JS封裝的 庫：對代碼進行封裝，調(diào)用封裝的方法，簡化操作 傳統(tǒng)方式是用get方式獲取元素，然后點方法 jQuery庫實現(xiàn)了對獲取方式的封裝，對方法的封裝 框架：提供代碼書寫規(guī)則，按照規(guī)則去寫代碼，框架會幫我們實現(xiàn)響應(yīng)的功能...
閱讀 2052·2019-08-30 15:52
閱讀 2444·2019-08-29 18:37
閱讀 796·2019-08-29 12:33
閱讀 2843·2019-08-29 11:04
閱讀 1532·2019-08-27 10:57
閱讀 2100·2019-08-26 13:38
閱讀 2766·2019-08-26 12:25
閱讀 2453·2019-08-26 12:23
