AngularJs Understanding the Model Component
在angular文檔討論的上下文中，術(shù)語(yǔ)“model”可以適用于單一對(duì)象代表一個(gè)實(shí)體（例如，一個(gè)叫” phones”的model，它的值是一個(gè)電話數(shù)組。）或者作為應(yīng)用的全部數(shù)據(jù)Model（所有實(shí)體）。
在angular中，model可以是任意數(shù)據(jù)，可以通過(guò)angular的scope對(duì)象的屬性來(lái)獲取model。屬性的名稱是model的標(biāo)識(shí)，值可以是任意javascript對(duì)象（包括數(shù)組和原始數(shù)據(jù)）。
javascript想成為model的唯一的條件是對(duì)象必須作為一個(gè)scope對(duì)象的屬性被angular scope引用。屬性的引用關(guān)系可以明確或者隱含地創(chuàng)建。
我們可以通過(guò)以下幾種方式來(lái)顯式創(chuàng)建scope的屬性，關(guān)聯(lián)javascript對(duì)象來(lái)創(chuàng)建model：
在javascript代碼中，直接賦值給scope對(duì)象的屬性；這通常發(fā)出現(xiàn)在controller中：
function MyCtrl($scope) {
// create property 'foo' on the MyCtrl's scope
// and assign it an initial value 'bar'
$scope.foo = 'bar';
}
在模版的angular表達(dá)式（http://www.cnblogs.com/lcllao/archive/2012/09/16/2687162.html）中，使用賦值操作符：
<button ng-click="{{foos='ball'}}">Click me</button>
在模版中使用ngInit directive（http://docs.angularjs.org/api/ng.directive:ngInit）（僅僅作為例子，不推薦在真實(shí)應(yīng)用中使用）
<body ng-init=" foo = 'bar' ">
angular在下面的模版結(jié)構(gòu)中會(huì)隱式創(chuàng)建model：
表單的input 、select、textarea和其他form元素：
<input ng-model="query" value="fluffy cloud">
上面的代碼，在當(dāng)前的scope中創(chuàng)建了一個(gè)叫”query”的model，并且與input的value值綁定，初始化為”fluffy cloud”。
在ngRepeater中聲明迭代器
<p ng-repeat="phone in phones"></p>
上面的代碼為每一個(gè)phones數(shù)組的元素各自創(chuàng)建了一個(gè)child scope，并且在對(duì)應(yīng)的child scope中創(chuàng)建”phone”model，賦予數(shù)組中對(duì)應(yīng)的值。
在angular中，當(dāng)出現(xiàn)下面的情況時(shí)，javascript對(duì)象將不再是一個(gè)model：
當(dāng)沒(méi)有angular scope包含與該對(duì)象關(guān)聯(lián)的屬性時(shí)。
所有包含與對(duì)象關(guān)聯(lián)的屬性的angular scope成為了陳舊和適合垃圾回收時(shí)。
下面的插圖展示了在一個(gè)簡(jiǎn)單的模版中隱式創(chuàng)建一個(gè)簡(jiǎn)單的數(shù)據(jù)model。
以上就是關(guān)于AngularJS Understanding the Model Component 的資料整理，后續(xù)繼續(xù)補(bǔ)充，謝謝大家對(duì)本站的支持！
相關(guān)文章
AngularJS 限定$scope的范圍實(shí)例詳解
這篇文章主要介紹了AngularJS 限定$scope的范圍實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-06-06
AngularJS中的Directive自定義一個(gè)表格
本篇文章給大家介紹在angularjs中自定義一個(gè)有關(guān)表格的directive，涉及到angularjs directive相關(guān)知識(shí)，對(duì)本文感興趣的朋友一起學(xué)習(xí)吧2016-01-01
基于AngularJs select綁定數(shù)字類型的問(wèn)題
今天小編就為大家分享一篇基于AngularJs select綁定數(shù)字類型的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
Angular中使用Intersection Observer API實(shí)現(xiàn)無(wú)限滾動(dòng)效果
這篇文章主要介紹了Angular中使用Intersection Observer API實(shí)現(xiàn)無(wú)限滾動(dòng),實(shí)現(xiàn)原理為 在data下面加一個(gè)loading元素 如果此元素進(jìn)入視窗 則調(diào)用api獲取新的數(shù)據(jù)加到原來(lái)的數(shù)據(jù)里面,這時(shí)loading就會(huì)被新數(shù)據(jù)頂下去,感興趣的朋友一起看看吧2023-12-12
利用AngularJs實(shí)現(xiàn)京東首頁(yè)輪播圖效果
這篇文章給大家介紹了如何利用AngularJs實(shí)現(xiàn)京東首頁(yè)輪播圖的效果，本文通過(guò)示例代碼詳細(xì)介紹了實(shí)現(xiàn)過(guò)程，對(duì)大家學(xué)習(xí)AngularJS具有一定參考借鑒價(jià)值，有需要的朋友們可以參考借鑒。2016-09-09
這篇文章主要介紹了AngularJS的表單使用詳解,在JS原有的基礎(chǔ)上提供了更多與HTML交互的功能,需要的朋友可以參考下2015-06-06
AngularJS集合數(shù)據(jù)遍歷顯示的實(shí)例
下面小編就為大家分享一篇AngularJS集合數(shù)據(jù)遍歷顯示的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
這篇文章主要介紹了詳解angular如何調(diào)用HTML字符串的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
AngularJS實(shí)現(xiàn)的2048小游戲功能【附源碼下載】
這篇文章主要介紹了AngularJS實(shí)現(xiàn)的2048小游戲,可實(shí)現(xiàn)通過(guò)鍵盤(pán)W、S、A、D鍵控制上下左右移動(dòng)進(jìn)行游戲的功能,涉及AngularJS頁(yè)面元素動(dòng)態(tài)操作及數(shù)值運(yùn)算等相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2018-01-01
這篇文章主要介紹了angular多語(yǔ)言配置詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05