AngularJS —— 表達(dá)式及指令

AngularJS 表達(dá)式

AngularJS 使用 表達(dá)式 把數(shù)據(jù)綁定到 HTML。

AngularJS 表達(dá)式
AngularJS 表達(dá)式寫在雙大括號(hào)內(nèi):{{ expression }}忆绰。
AngularJS 表達(dá)式把數(shù)據(jù)綁定到 HTML与帆,這與 ng-bind 指令有異曲同工之妙国瓮。
AngularJS 將在表達(dá)式書寫的位置"輸出"數(shù)據(jù)糕簿。
AngularJS 表達(dá)式 很像 JavaScript 表達(dá)式:它們可以包含文字屈扎、運(yùn)算符和變量怀挠。
實(shí)例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

AngularJS 表達(dá)式 與 JavaScript 表達(dá)式
類似于 JavaScript 表達(dá)式析蝴,AngularJS 表達(dá)式可以包含字母,操作符绿淋,變量闷畸。
與 JavaScript 表達(dá)式不同,AngularJS 表達(dá)式可以寫在 HTML 中吞滞。
與 JavaScript 表達(dá)式不同佑菩,AngularJS 表達(dá)式不支持條件判斷,循環(huán)及異常裁赠。
與 JavaScript 表達(dá)式不同殿漠,AngularJS 表達(dá)式支持過濾器。

AngularJS 指令

AngularJS 通過被稱為 指令 的新屬性來擴(kuò)展 HTML佩捞。
AngularJS 通過內(nèi)置的指令來為應(yīng)用添加功能绞幌。
AngularJS 允許你自定義指令。

AngularJS 指令
AngularJS 指令是擴(kuò)展的 HTML 屬性一忱,帶有前綴 ng-莲蜘。
ng-app 指令初始化一個(gè) AngularJS 應(yīng)用程序谭确。
ng-init 指令初始化應(yīng)用程序數(shù)據(jù)。
ng-model 指令把元素值(比如輸入域的值)綁定到應(yīng)用程序菇夸。

AngularJS 實(shí)例
<div ng-app="" ng-init="firstName='John'">
 
     <p>在輸入框中嘗試輸入:</p>
     <p>姓名:<input type="text" ng-model="firstName"></p>
     <p>你輸入的為: {{ firstName }}</p>
 
</div>

ng-app 指令告訴 AngularJS琼富,<div> 元素是 AngularJS 應(yīng)用程序 的"所有者"。

一個(gè)網(wǎng)頁可以包含多個(gè)運(yùn)行在不同元素中的 AngularJS 應(yīng)用程序庄新。

數(shù)據(jù)綁定

上面實(shí)例中的 {{ firstName }} 表達(dá)式是一個(gè) AngularJS 數(shù)據(jù)綁定表達(dá)式鞠眉。
AngularJS 中的數(shù)據(jù)綁定,同步了 AngularJS 表達(dá)式與 AngularJS 數(shù)據(jù)择诈。
{{ firstName }} 是通過 ng-model="firstName" 進(jìn)行同步械蹋。
在下一個(gè)實(shí)例中,兩個(gè)文本域是通過兩個(gè) ng-model 指令同步的:

AngularJS 實(shí)例
<div ng-app="" ng-init="quantity=1;price=5">
 
<h2>價(jià)格計(jì)算器</h2>
 
數(shù)量: <input type="number"    ng-model="quantity">
價(jià)格: <input type="number" ng-model="price">
 
<p><b>總價(jià):</b> {{ quantity * price }}</p>
 
</div>

重復(fù) HTML 元素

ng-repeat 指令會(huì)重復(fù)一個(gè) HTML 元素羞芍。
AngularJS 完美支持?jǐn)?shù)據(jù)庫的 CRUD(增加Create哗戈、讀取Read、更新Update荷科、刪除Delete)應(yīng)用程序唯咬。 把實(shí)例中的對(duì)象想象成數(shù)據(jù)庫中的記錄。

ng-app 指令

ng-app 指令定義了 AngularJS 應(yīng)用程序的 根元素畏浆。
ng-app 指令在網(wǎng)頁加載完畢時(shí)會(huì)自動(dòng)引導(dǎo)(自動(dòng)初始化)應(yīng)用程序胆胰。

ng-init 指令

ng-init 指令為 AngularJS 應(yīng)用程序定義了 初始值。
通常情況下刻获,不使用 ng-init蜀涨。您將使用一個(gè)控制器或模塊來代替它。

ng-model 指令

ng-model 指令 綁定 HTML 元素 到應(yīng)用程序數(shù)據(jù)蝎毡。
ng-model 指令也可以:

  • 為應(yīng)用程序數(shù)據(jù)提供類型驗(yàn)證(number厚柳、email、required)沐兵。
  • 為應(yīng)用程序數(shù)據(jù)提供狀態(tài)(invalid别垮、dirty、touched扎谎、error)宰闰。
  • 為 HTML 元素提供 CSS 類。
  • 綁定 HTML 元素到 HTML 表單簿透。

ng-repeat 指令

ng-repeat 指令對(duì)于集合中(數(shù)組中)的每個(gè)項(xiàng)會(huì) 克隆一次 HTML 元素蛇损。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末闷尿,一起剝皮案震驚了整個(gè)濱河市损痰,隨后出現(xiàn)的幾起案子土至,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,640評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件觅够,死亡現(xiàn)場離奇詭異胶背,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)喘先,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,254評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門钳吟,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人窘拯,你說我怎么就攤上這事红且。” “怎么了涤姊?”我有些...
    開封第一講書人閱讀 165,011評(píng)論 0 355
  • 文/不壞的土叔 我叫張陵暇番,是天一觀的道長。 經(jīng)常有香客問我思喊,道長壁酬,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,755評(píng)論 1 294
  • 正文 為了忘掉前任恨课,我火速辦了婚禮舆乔,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘剂公。我一直安慰自己希俩,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,774評(píng)論 6 392
  • 文/花漫 我一把揭開白布诬留。 她就那樣靜靜地躺著斜纪,像睡著了一般贫母。 火紅的嫁衣襯著肌膚如雪文兑。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,610評(píng)論 1 305
  • 那天腺劣,我揣著相機(jī)與錄音绿贞,去河邊找鬼。 笑死橘原,一個(gè)胖子當(dāng)著我的面吹牛籍铁,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播趾断,決...
    沈念sama閱讀 40,352評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼拒名,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了芋酌?” 一聲冷哼從身側(cè)響起增显,我...
    開封第一講書人閱讀 39,257評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎脐帝,沒想到半個(gè)月后同云,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體糖权,經(jīng)...
    沈念sama閱讀 45,717評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,894評(píng)論 3 336
  • 正文 我和宋清朗相戀三年炸站,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了星澳。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,021評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡旱易,死狀恐怖禁偎,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情咒唆,我是刑警寧澤届垫,帶...
    沈念sama閱讀 35,735評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站全释,受9級(jí)特大地震影響装处,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜浸船,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,354評(píng)論 3 330
  • 文/蒙蒙 一妄迁、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧李命,春花似錦登淘、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,936評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至阔籽,卻和暖如春流妻,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背笆制。 一陣腳步聲響...
    開封第一講書人閱讀 33,054評(píng)論 1 270
  • 我被黑心中介騙來泰國打工绅这, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人在辆。 一個(gè)月前我還...
    沈念sama閱讀 48,224評(píng)論 3 371
  • 正文 我出身青樓证薇,卻偏偏與公主長得像,于是被迫代替她去往敵國和親匆篓。 傳聞我的和親對(duì)象是個(gè)殘疾皇子浑度,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,974評(píng)論 2 355

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