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 相关文章推荐
关于 byval 与 byref 的区别分析总结
Oct 08 Javascript
JavaScript写的一个自定义弹出式对话框代码
Jan 17 Javascript
简介AngularJS中使用factory和service的方法
Jun 17 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
Jan 06 Javascript
Angular.JS中select下拉框设置value的方法
Jun 20 Javascript
详解jquery选择器的原理
Aug 01 jQuery
利用Javascript获取选择文本所在的句子详解
Dec 03 Javascript
vue自定义filters过滤器
Apr 26 Javascript
浅谈Angular6的服务和依赖注入
Jun 27 Javascript
微信小程序中使用echarts的实现方法
Apr 24 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
javascript对象3个属性特征
Nov 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数组函数序列之array_key_exists() - 查找数组键名是否存在
2011/10/29 PHP
我的php学习笔记(毕业设计)
2012/02/21 PHP
php获取数组长度的方法(有实例)
2013/10/27 PHP
php文件上传类完整实例
2016/05/14 PHP
redis查看连接数及php模拟并发创建redis连接的方法
2016/12/15 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
javascript在一段文字中的光标处插入其他文字
2007/08/26 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
2011/10/06 Javascript
浅谈javascript的原型继承
2012/07/25 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
jQuery的promise与deferred对象在异步回调中的作用
2016/05/03 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
从零学习node.js之简易的网络爬虫(四)
2017/02/22 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
js实现登录与注册界面
2017/11/01 Javascript
JavaScript实现区块链
2018/03/14 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
原生js通过一行代码实现简易轮播图
2019/06/05 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
python 生成器协程运算实例
2017/09/04 Python
python+opencv轮廓检测代码解析
2018/01/05 Python
python实现求最长回文子串长度
2018/01/22 Python
Python中常用的内置方法
2019/01/28 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
用Python进行websocket接口测试
2020/10/16 Python
国际书籍零售商:Wordery
2017/11/01 全球购物
以色列的身体护理及家居香薰品牌:Sabon NYC
2018/02/23 全球购物
澳大利亚宠物食品和用品商店:PETstock
2020/01/02 全球购物
群众路线剖析材料
2014/02/02 职场文书
2013年军训通讯稿
2014/02/05 职场文书
高一数学教学反思
2014/02/07 职场文书
公司合作协议书范本
2014/04/18 职场文书
乒乓球比赛通知
2015/04/27 职场文书