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 相关文章推荐
Google Suggest ;-) 基于js的动态下拉菜单
Oct 11 Javascript
用jquery实现下拉菜单效果的代码
Jul 25 Javascript
jquery中dom操作和事件的实例学习-表单验证
Nov 30 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
Nov 26 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
Mar 06 Javascript
ES6学习教程之块级作用域详解
Oct 09 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
Node.js Windows Binary二进制文件安装方法
May 16 Javascript
浅谈JS中几种轻松处理'this'指向方式
Sep 16 Javascript
javascript实现倒计时效果
Feb 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 heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
php 删除数组元素
2009/01/16 PHP
php中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
详解iframe与frame的区别
2016/01/13 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
JS动态给对象添加属性和值的实现方法
2016/10/21 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
JS库之Three.js 简易入门教程(详解之一)
2017/09/13 Javascript
JS实现获取进今年第几天是周几的方法分析
2018/06/27 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
Python类的动态修改的实例方法
2017/03/24 Python
PyCharm设置护眼背景色的方法
2018/10/29 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
Uber Eats台湾:寻找附近提供送餐服务的餐厅
2018/05/07 全球购物
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
技术岗位竞聘演讲稿
2014/05/16 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
天猫活动策划方案
2014/08/21 职场文书
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
离婚协议书应该怎么写
2014/10/12 职场文书
三方股份合作协议书
2014/10/13 职场文书
护理专业自我评价
2015/03/11 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
2016入党培训心得体会范文
2016/01/08 职场文书
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python