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