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 相关文章推荐
Javascript MD4
Dec 20 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
Aug 09 Javascript
jquery 实现上下滚动效果示例代码
Aug 09 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
Mar 26 Javascript
javascript实现youku的视频代码自适应宽度
May 25 Javascript
javascript原型继承工作原理和实例详解
Apr 07 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
Jan 13 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
JS实现字符串翻转的方法分析
Aug 31 Javascript
VUE安装使用教程详解
Jun 03 Javascript
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
Mar 17 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
PHP print类函数使用总结
2010/06/25 PHP
服务器web工具 php环境下
2010/12/29 PHP
PHP7 新增功能
2021/03/09 PHP
JavaScript高级程序设计 学习笔记 js高级技巧
2011/09/20 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
jquery获取form表单input元素值的简单实例
2016/05/30 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
vue 2.0 购物车小球抛物线的示例代码
2018/02/01 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
element-ui多文件上传的实现示例
2019/04/10 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
[48:27]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python的函数的一些高阶特性
2015/04/27 Python
Python中用sleep()方法操作时间的教程
2015/05/22 Python
Python设计实现的计算器功能完整实例
2017/08/18 Python
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
PyCharm在win10的64位系统安装实例
2017/11/26 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
pytorch对可变长度序列的处理方法详解
2018/12/08 Python
对python读取CT医学图像的实例详解
2019/01/24 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
集世界奢侈品和设计师品牌的意大利精品买手店:Tessabit
2019/08/17 全球购物
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
演讲稿开场白
2014/01/13 职场文书
高中生自我评语大全
2014/01/19 职场文书
学校个人对照检查材料
2014/08/26 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
活动简报范文
2015/07/22 职场文书
职业规划从高考志愿专业选择开始
2019/08/08 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书
基于angular实现树形二级表格
2021/10/16 Javascript