AngularJs Understanding the Model Component


Posted in Javascript onSeptember 02, 2016

        在angular文档讨论的上下文中,术语“model”可以适用于单一对象代表一个实体(例如,一个叫” phones”的model,它的值是一个电话数组。)或者作为应用的全部数据Model(所有实体)。

在angular中,model可以是任意数据,可以通过angular的scope对象的属性来获取model。属性的名称是model的标识,值可以是任意javascript对象(包括数组和原始数据)。

javascript想成为model的唯一的条件是对象必须作为一个scope对象的属性被angular scope引用。属性的引用关系可以明确或者隐含地创建。

我们可以通过以下几种方式来显式创建scope的属性,关联javascript对象来创建model:

在javascript代码中,直接赋值给scope对象的属性;这通常发出现在controller中:

function MyCtrl($scope) {

   // create property 'foo' on the MyCtrl's scope

   // and assign it an initial value 'bar'

   $scope.foo = 'bar';

 }

在模版的angular表达式(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)(仅仅作为例子,不推荐在真实应用中使用)

<body ng-init=" foo = 'bar' ">

angular在下面的模版结构中会隐式创建model:

表单的input 、select、textarea和其他form元素:

<input ng-model="query" value="fluffy cloud">

上面的代码,在当前的scope中创建了一个叫”query”的model,并且与input的value值绑定,初始化为”fluffy cloud”。

在ngRepeater中声明迭代器

<p ng-repeat="phone in phones"></p>

上面的代码为每一个phones数组的元素各自创建了一个child scope,并且在对应的child scope中创建”phone”model,赋予数组中对应的值。

在angular中,当出现下面的情况时,javascript对象将不再是一个model:

当没有angular scope包含与该对象关联的属性时。
所有包含与对象关联的属性的angular scope成为了陈旧和适合垃圾回收时。

下面的插图展示了在一个简单的模版中隐式创建一个简单的数据model。

 AngularJs Understanding the Model Component

 以上就是关于AngularJS Understanding the Model Component 的资料整理,后续继续补充,谢谢大家对本站的支持!

Javascript 相关文章推荐
提高网站信任度的技巧
Oct 17 Javascript
JavaScript的类型简单说明
Sep 03 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
微信小程序 wx:key详细介绍
Oct 28 Javascript
vue实现仿淘宝结账页面实例代码
Nov 08 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
Node.js笔记之process模块解读
May 31 Javascript
微信小程序手机号码验证功能的实例代码
Aug 28 Javascript
React 实现拖拽功能的示例代码
Jan 06 Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 Javascript
一起写一个即插即用的Vue Loading插件实现
Oct 31 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 #Javascript
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 #Javascript
js实现String.Fomat的实例代码
Sep 02 #Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 #Javascript
CSS3 3D 技术手把手教你玩转
Sep 02 #Javascript
js实现StringBuffer的简单实例
Sep 02 #Javascript
纯JS实现可拖拽表单的简单实例
Sep 02 #Javascript
You might like
站长助手-网站web在线管理程序 v1.0 下载
2007/05/12 PHP
PHP如何编写易读的代码
2007/07/10 PHP
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
php去除html标记的原生函数详解
2015/01/27 PHP
js 操作css实现代码
2009/06/11 Javascript
js中将String转换为number以便比较
2014/07/08 Javascript
jQuery中noconflict函数的实现原理分解
2015/02/03 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
2016/05/20 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
2017/08/17 Javascript
JS分页的实现(同步与异步)
2017/09/16 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
小程序跳转H5页面的方法步骤
2020/03/06 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
python字符串连接方式汇总
2014/08/21 Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
2018/07/31 Python
Python hmac模块使用实例解析
2019/12/24 Python
浅谈python元素如何去重,去重后如何保持原来元素的顺序不变
2020/02/28 Python
python数据库开发之MongoDB安装及Python3操作MongoDB数据库详细方法与实例
2020/03/18 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
泰坦健身器材:Titan Fitness
2018/02/13 全球购物
美味咖啡的顶级烘焙师:Cafe Britt
2018/03/15 全球购物
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
FC-Moto丹麦:欧洲最大的摩托车服装和头盔商店之一
2019/08/20 全球购物
Delphi笔试题
2016/11/14 面试题
物流管理专业毕业生求职信
2014/03/23 职场文书
移风易俗倡议书
2014/04/15 职场文书
安全教育月活动总结
2014/05/05 职场文书
环保倡议书范文
2014/05/12 职场文书
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
社区重阳节活动总结
2015/03/24 职场文书