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 相关文章推荐
使用js对select动态添加和删除OPTION示例代码
Aug 12 Javascript
JS判断表单输入是否为空(示例代码)
Dec 23 Javascript
jquery分页插件jpaginate在IE中不兼容问题
Apr 22 Javascript
JavaScript 数组中最大最小值
Jun 05 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 Javascript
全面了解js中的script标签
Jul 04 Javascript
Bootstrap轮播图的使用和理解4
Dec 14 Javascript
Javascript基础回顾之(一) 类型
Jan 31 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 Javascript
详解react组件通讯方式(多种)
May 06 Javascript
基于javascript原生判断DOM是否加载完毕
Oct 14 Javascript
vue 实现上传组件
May 31 Vue.js
浅谈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
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
深入解析PHP中逗号与点号的区别
2013/08/05 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
深入理解PHP 数组之count 函数
2016/06/13 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
2016/06/22 Javascript
微信小程序 PHP后端form表单提交实例详解
2017/01/12 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
Webpack打包css后z-index被重新计算的解决方法
2017/06/18 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
js如何获取图片url的Blob值并预览示例代码
2019/03/07 Javascript
JS代码触发事件代码实例
2020/01/02 Javascript
javascript实现前端成语点击验证优化
2020/06/24 Javascript
[50:05]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
tensorflow训练中出现nan问题的解决
2018/02/10 Python
Python KMeans聚类问题分析
2018/02/23 Python
如何基于python生成list的所有的子集
2019/11/11 Python
Python新手学习装饰器
2020/06/04 Python
python 判断一组数据是否符合正态分布
2020/09/23 Python
python3中布局背景颜色代码分析
2020/12/01 Python
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
军训 自我鉴定
2014/02/03 职场文书
学校募捐倡议书
2014/05/14 职场文书
2014年国庆标语
2014/06/30 职场文书
党支部创先争优承诺书
2014/08/30 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
职场领导同事生日简短祝福语
2019/08/06 职场文书
SpringCloud Alibaba 基本开发框架搭建过程
2021/06/13 Java/Android
总结Python连接CS2000的详细步骤
2021/06/23 Python
vue项目多环境配置(.env)的实现
2021/07/21 Vue.js
Python利用Turtle绘制哆啦A梦和小猪佩奇
2022/04/04 Python