AngularJS 最常用的八種功能

AngularJS 使用基礎(chǔ)知識(shí)

第一 迭代輸出之ng-repeat標(biāo)簽

ng-repeat讓table ul ol等標(biāo)簽和js里的數(shù)組完美結(jié)合

<li ng-repeat="person in persons">
{{person.name}} is {{person.age}} years old.
</li>
</ul>

你甚至可以指定輸出的順序:

第二 動(dòng)態(tài)綁定之ng-model標(biāo)簽

任何有用戶輸入尽楔,只要是有值的html標(biāo)簽,都可以動(dòng)態(tài)綁定js中的變量砚偶,
而且是動(dòng)態(tài)綁定炮赦。

對(duì)于綁定的變量水醋,你可以使用{{}} 直接引用

如果你熟悉fiter癌蚁,你可以很容易的按你的需要格式輸出

第三 綁定點(diǎn)擊事件之ng-click事件

使用ng-click你可以很容易的為一個(gè)標(biāo)簽綁定點(diǎn)擊事件。

當(dāng)然前提是你要在$scope域中定義的自己的pressMe方法幔虏。

和傳統(tǒng)的onclick方法不同产喉,你甚至可以為ng-click方法傳遞一個(gè)對(duì)象捂掰,就像這樣:

<li ng-repeat="person in persons">
<button ng-click="printf(person)"/>
</li>
</ul>

當(dāng)然還有ng-dblclick標(biāo)簽

第四 分支語句之ng-switch on、ng-if/ng-show/ng-hide/ng-disabled標(biāo)簽

分支語句讓你在界面上都可以寫邏輯判斷镊叁。

<li ng-repeat="person in persons">
<span ng-switch on="person.sex">
<span ng-switch-when="1">you are a boy</span>
<span ng-switch-when="2">you are a girl</span>
</span>
<span ng-if="person.sex==1">you may be a father</span>
<span ng-show="person.sex==2">you may be a mother</span>
<span>
please input your baby's name:<input type="text" ng-disabled="!person.hasBaby"/>
</span>
<span>
</li>
</ul>

第五 校驗(yàn)語法之ng-trim ng-minlength ng-maxlength required ng-pattern 等標(biāo)簽

表單中的輸入框尘颓,你可以使用上面的標(biāo)簽來實(shí)現(xiàn)對(duì)用戶輸入的校驗(yàn)。
從字面意思上你已經(jīng)知道了它們的意思晦譬。

<input type="text" name="inputText" required ng-trim="true" ng-model="userNum" ng-pattern="/^[0-9]*[1-9][0-9]*$/" ng-maxlength="6" maxlength="6"/>
</form>

你可以通過 scope.yourForm.inputText.error.required 來判斷輸入框是否為空
你可以通過 scope.yourForm.inputText.invalid 來判斷輸入的內(nèi)容是否滿足ng-pattern疤苹,ng-maxlength,maxlength
你通過$scope.userNum獲得的輸入內(nèi)容是去掉前后空白的敛腌,因?yàn)閚g-trim的存在卧土。

第六 下拉框之ng-options標(biāo)簽

ng-options是為下拉框?qū)iT打造的標(biāo)簽。

下拉框中顯示的是person.name像樊,當(dāng)你選中其中一個(gè)的時(shí)候尤莺,你可以通過yourSelected得到你選中的person.id.

第七 控制css之ng-style標(biāo)簽

ng-style幫你輕松控制你的css屬性

你可以通過給myColor賦值的形式來改變你想要的效果,就像這樣:
$scope.myColor={color:'blue'}; $scope.myColor={cursor: 'pointer',color:'blue'};

第八 異步請(qǐng)求之$http對(duì)象生棍。

AngularJS 提供了一個(gè)類似jquery的.ajax的對(duì)象颤霎,用于異步請(qǐng)求。 在AngularJS中對(duì)異步操作是推崇至極的涂滴,所以http的操作都是異步的不像jquery.ajax里還提供了async參數(shù)友酱。

.success(function(response, status, headers, config){
//do anything what you want;
})
.error(function(response, status, headers, config){
//do  anything what you want;
});

如果你是POST請(qǐng)求,params里的數(shù)據(jù)會(huì)幫你拼到url后面柔纵,data里的數(shù)據(jù)會(huì)放到請(qǐng)求體中缔杉。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市搁料,隨后出現(xiàn)的幾起案子或详,更是在濱河造成了極大的恐慌系羞,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,110評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件霸琴,死亡現(xiàn)場(chǎng)離奇詭異椒振,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)沈贝,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,443評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門杠人,熙熙樓的掌柜王于貴愁眉苦臉地迎上來勋乾,“玉大人宋下,你說我怎么就攤上這事〖” “怎么了学歧?”我有些...
    開封第一講書人閱讀 165,474評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)各吨。 經(jīng)常有香客問我枝笨,道長(zhǎng),這世上最難降的妖魔是什么揭蜒? 我笑而不...
    開封第一講書人閱讀 58,881評(píng)論 1 295
  • 正文 為了忘掉前任横浑,我火速辦了婚禮,結(jié)果婚禮上屉更,老公的妹妹穿的比我還像新娘徙融。我一直安慰自己,他們只是感情好瑰谜,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,902評(píng)論 6 392
  • 文/花漫 我一把揭開白布欺冀。 她就那樣靜靜地躺著,像睡著了一般萨脑。 火紅的嫁衣襯著肌膚如雪隐轩。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,698評(píng)論 1 305
  • 那天渤早,我揣著相機(jī)與錄音职车,去河邊找鬼。 笑死鹊杖,一個(gè)胖子當(dāng)著我的面吹牛悴灵,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播仅淑,決...
    沈念sama閱讀 40,418評(píng)論 3 419
  • 文/蒼蘭香墨 我猛地睜開眼称勋,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了涯竟?” 一聲冷哼從身側(cè)響起赡鲜,我...
    開封第一講書人閱讀 39,332評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤空厌,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后银酬,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體嘲更,經(jīng)...
    沈念sama閱讀 45,796評(píng)論 1 316
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,968評(píng)論 3 337
  • 正文 我和宋清朗相戀三年揩瞪,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了赋朦。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,110評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡李破,死狀恐怖宠哄,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情嗤攻,我是刑警寧澤毛嫉,帶...
    沈念sama閱讀 35,792評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站妇菱,受9級(jí)特大地震影響承粤,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜闯团,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,455評(píng)論 3 331
  • 文/蒙蒙 一辛臊、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧房交,春花似錦彻舰、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,003評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至负溪,卻和暖如春透揣,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背川抡。 一陣腳步聲響...
    開封第一講書人閱讀 33,130評(píng)論 1 272
  • 我被黑心中介騙來泰國(guó)打工辐真, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人崖堤。 一個(gè)月前我還...
    沈念sama閱讀 48,348評(píng)論 3 373
  • 正文 我出身青樓侍咱,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親密幔。 傳聞我的和親對(duì)象是個(gè)殘疾皇子楔脯,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,047評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容