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 相关文章推荐
window.open以post方式将内容提交到新窗口
Dec 26 Javascript
jquery struts 验证唯一标识(公用方法)
Mar 27 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
Aug 24 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
Javascript连接Access数据库完整实例
Aug 03 Javascript
Vue EventBus自定义组件事件传递
Jun 25 Javascript
layui table设置前台过滤转义等方法
Aug 17 Javascript
vue中render函数的使用详解
Oct 12 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
Nov 30 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
May 09 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 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
PL-880隐藏功能
2021/03/01 无线电
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
PHP获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
js模仿windows桌面图标排列算法具体实现(附图)
2013/06/16 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
jQuery中:has选择器用法实例
2014/12/30 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
常用jQuery代码分享
2015/07/14 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
2015/08/21 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
angularjs封装bootstrap时间插件datetimepicker
2016/06/20 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
vue头部导航动态点击处理方法
2018/11/02 Javascript
vue v-for 使用问题整理小结
2019/08/04 Javascript
Python random模块(获取随机数)常用方法和使用例子
2014/05/13 Python
Python算法应用实战之队列详解
2017/02/04 Python
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
Python socket 套接字实现通信详解
2019/08/27 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
TensorFlow的环境配置与安装方法
2021/02/20 Python
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
西班牙多品牌鞋店连锁店:Krack
2018/11/30 全球购物
物业保安员岗位职责
2014/03/14 职场文书
服装采购员岗位职责
2014/03/15 职场文书
保险公司早会主持词
2014/03/22 职场文书
会计学习心得体会
2014/09/09 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
2014年流动人口工作总结
2014/11/26 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书
服务器nginx权限被拒绝解决案例
2022/09/23 Servers