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 相关文章推荐
将json当数据库一样操作的javascript lib
Oct 28 Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
浅谈jQuery添加的HTML,JS失效的问题
Oct 05 Javascript
jquery checkbox的相关操作总结
Oct 17 Javascript
zTree获取当前节点的下一级子节点数实例
Sep 05 Javascript
vue小白入门教程
Apr 02 Javascript
jQuery.parseJSON()函数详解
Feb 28 jQuery
微信小程序搜索功能(附:小程序前端+PHP后端)
Feb 28 Javascript
jQuery 实现扁平式小清新导航
Jul 07 jQuery
在vue中实现给每个页面顶部设置title
Jul 29 Javascript
JS实现简易日历效果
Jan 25 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
超级简单的发送邮件程序
2006/10/09 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
JSON 编辑器实现代码
2009/12/06 Javascript
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
基于JQuery 的消息提示框效果代码
2011/07/31 Javascript
jQuery LigerUI 使用教程表格篇(1)
2012/01/18 Javascript
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
Javascript保存网页为图片借助于html2canvas库实现
2014/09/05 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
javascript中setAttribute兼容性用法分析
2016/12/12 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
js实现多图和单图上传显示
2019/12/18 Javascript
js通过canvas生成图片缩略图
2020/10/02 Javascript
[02:15]2015国际邀请赛选手档案IG.Ferrari 430
2015/07/30 DOTA
python正则表达式中的括号匹配问题
2014/12/14 Python
Python 的 Socket 编程
2015/03/24 Python
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
Linux下Pycharm、Anaconda环境配置及使用踩坑
2018/12/19 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
python绘制多个子图的实例
2019/07/07 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
美国女士泳装店:Swimsuits For All
2017/03/02 全球购物
TripAdvisor斯洛伐克:阅读评论、比较价格和酒店预订
2018/04/25 全球购物
TALLY WEiJL法国网上商店:服装、时装及配饰
2019/08/31 全球购物
校园自助餐厅的创业计划书
2013/12/26 职场文书
经理管理专业毕业自荐书范文
2014/02/12 职场文书
《孔子拜师》教学反思
2014/02/24 职场文书
服务承诺书范文
2014/05/19 职场文书
师德师风自查材料
2014/10/14 职场文书
新生儿未入户证明
2015/06/23 职场文书