欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的寫法

 更新時(shí)間:2017年06月29日 10:55:26   作者:劉文壯  
本篇文章主要介紹了Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的區(qū)別,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

“對(duì)呀對(duì)呀!……回字有四樣寫法,你知道么?”,當(dāng)時(shí)魯大大如此諷刺孔乙己,意味著老孔這個(gè)被科舉制毒害的人注意此種無用之物實(shí)在可悲。但是在Angular 2的世界中,很少存在無用之物,ngModel有三種寫法,你知道嗎?

表單的設(shè)計(jì)永遠(yuǎn)都是應(yīng)用的重頭戲,而其中最基本的功能點(diǎn)即是通過一個(gè)個(gè)輸入組件實(shí)現(xiàn)的,為此Angular 2為我們提供了鋒利的武器:ngModel。而其不同的使用方式有著大不相同的作用:

ngModel

如果單獨(dú)使用ngModel,且沒有為其賦值的話,它會(huì)在其所在的ngForm.value對(duì)象上添加一個(gè)property,此property的key值為ngModel所在組件設(shè)置的name屬性的值:

<form novalidate #f="ngForm">
 <input type='text' name='userName' placeholder='Input your userName' ngModel>
</form>
<p>
 {{ f.value | json }} // { "userName": "" }
</p>

此時(shí)需要注意的是,單獨(dú)使用ngModel時(shí),如果沒有為ngModel賦值的話,則必須存在name屬性。

也就是說,單獨(dú)ngModel的作用是通知ngForm.value,我要向你那里加入一個(gè)property,其key值是組件的name屬性值,其value為空字符串。

[ngModel]

可是,如果想向ngForm中添加一個(gè)有默認(rèn)值的property需要怎么做呢?這時(shí)就需要使用單向數(shù)據(jù)綁定的格式了,也就是[ngModel]:

this.model = {
 userName: 'Casear'
};

<form novalidate #f="ngForm">
 <input type='text' name='userName' placeholder='Input your userName' [ngModel]='model.userName'>
</form>
<p>
 {{ f.value | json }} // { "userName": "Casear" }
 {{ model | json }}  // { "userName": "Casear" },不會(huì)隨著f.value的變化而變化
</p>

這里我們使用了單向數(shù)據(jù)綁定的特點(diǎn),可以為ngForm.value添加一個(gè)帶有初始值的property。

注意單向數(shù)據(jù)綁定的特點(diǎn),此時(shí)在表單輸入框中做的任何改變都不會(huì)影響model中的數(shù)據(jù),也就是說this.model.userName不會(huì)隨著輸入框的改變而改變。不過輸入框改變會(huì)體現(xiàn)在f.value中。

[(ngModel)]

上述的單向數(shù)據(jù)綁定在單純地提供初始值很有用,不過總是有些場(chǎng)景需要將用戶輸入體現(xiàn)在我們的model上,此時(shí)就需要雙向數(shù)據(jù)綁定了,也即[(ngModel)]:

this.model = {
 userName: 'Casear'
};

<form novalidate #f="ngForm">
 <input type='text' name='userName' placeholder='Input your userName' [(ngModel)]='model.userName'>
</form>
<p>
 {{ f.value | json }} // { "userName": "Casear" }
 {{ model | json }}  // { "userName": "Casear" },會(huì)隨著f.value的變化而變化
</p>

這里我們不僅為ngForm.value添加了一個(gè)帶有初始值的property,還能實(shí)現(xiàn)Model和View層的聯(lián)動(dòng),盡管這種方式可能并不好,但是在某些情況下也不失為一種簡便的方案。

關(guān)于[(ngModel)]的內(nèi)部邏輯可查看Angular 2 父子組件數(shù)據(jù)通信。

以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • angular5 httpclient的示例實(shí)戰(zhàn)

    angular5 httpclient的示例實(shí)戰(zhàn)

    本篇文章主要介紹了angular5 httpclient的示例實(shí)戰(zhàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-03-03
  • Angular1.x復(fù)雜指令實(shí)例詳解

    Angular1.x復(fù)雜指令實(shí)例詳解

    這篇文章主要介紹了Angular1.x復(fù)雜指令,結(jié)合實(shí)例形式分析了指令的使用、模板指令、指令的作用域等概念與具體使用技巧,需要的朋友可以參考下
    2017-03-03
  • Angular中使用MathJax遇到的一些問題

    Angular中使用MathJax遇到的一些問題

    這篇文章主要給大家介紹了關(guān)于Angular中使用MathJax遇到的一些問題,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友下面來一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-12-12
  • angularJS結(jié)合canvas畫圖例子

    angularJS結(jié)合canvas畫圖例子

    這篇文章主要介紹了angularJS結(jié)合canvas畫圖例子的方法,需要的朋友可以參考下
    2015-02-02
  • AngularJs expression詳解及簡單示例

    AngularJs expression詳解及簡單示例

    本文主要介紹AngularJs expression,這里整理了詳細(xì)的資料,并附示例代碼,有興趣的小伙伴可以參考下
    2016-09-09
  • AngularJS bootstrap啟動(dòng)詳解及實(shí)例代碼

    AngularJS bootstrap啟動(dòng)詳解及實(shí)例代碼

    這篇文章主要介紹了AngularJS bootstrap啟動(dòng)的知識(shí),這里整理了相關(guān)資料及簡單實(shí)例代碼,,需要的朋友可以參考下
    2016-09-09
  • Angular 4.x 路由快速入門學(xué)習(xí)

    Angular 4.x 路由快速入門學(xué)習(xí)

    這篇文章主要介紹了Angular 4.x 路由快速入門學(xué)習(xí),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-05-05
  • 模板視圖和AngularJS之間沖突的解決方法

    模板視圖和AngularJS之間沖突的解決方法

    這篇文章主要介紹了模板視圖和AngularJS之間沖突的解決方法,結(jié)合實(shí)例形式分析了AngularJS模板視圖沖突的原因并給出了2種解決方法供大家參考使用,需要的朋友可以參考下
    2016-11-11
  • AngularJs  Understanding Angular Templates

    AngularJs Understanding Angular Templates

    本文主要介紹AngularJs Understanding Angular Templates的資料,這里整理了詳細(xì)的資料及簡單示例代碼,有興趣的小伙伴的參考下
    2016-09-09
  • AngularJS數(shù)據(jù)源的多種獲取方式匯總

    AngularJS數(shù)據(jù)源的多種獲取方式匯總

    在AngularJS中獲取數(shù)據(jù)源的方式有很多種,本文給大家整理幾種獲取數(shù)據(jù)源的方式,對(duì)angularjs獲取數(shù)據(jù)源的方式相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
    2016-02-02

最新評(píng)論