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矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
Jan 09 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
Jun 08 Javascript
浅析LigerUi开发中谨慎载入common.css文件
Jul 09 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
Nov 29 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
Nov 27 Javascript
js中document.referrer实现移动端返回上一页
Feb 22 Javascript
vue2项目使用sass的示例代码
Jun 28 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
vue element-ui table表格滚动加载方法
Mar 02 Javascript
vue异步加载高德地图的实现
Jun 19 Javascript
angular多语言配置详解
May 16 Javascript
js实现消灭星星(web简易版)
Mar 24 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实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
php获取指定范围内最接近数的方法
2015/06/02 PHP
php简单防盗链实现方法
2015/07/29 PHP
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
2009/11/24 Javascript
js arguments对象应用介绍
2012/11/28 Javascript
cument.execCommand()用法深入理解
2012/12/04 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
JavaScript实现同一个页面打开多张图片
2016/12/29 Javascript
angular+ionic 的app上拉加载更新数据实现方法
2017/01/16 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
vue.js根据代码运行环境选择baseurl的方法
2018/02/28 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
JavaScript实现文件下载并重命名代码实例
2019/12/12 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
PyQt5每天必学之像素图控件QPixmap
2018/04/19 Python
对python list 遍历删除的正确方法详解
2018/06/29 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
python实现图片转字符画
2021/02/19 Python
表彰先进的通报
2014/01/31 职场文书
2014年中班元旦活动方案
2014/02/14 职场文书
质量提升方案
2014/06/16 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
2015年煤矿工作总结
2015/04/28 职场文书
2016年第二十五次全国助残日活动总结
2016/04/01 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers