02、AngularJs的数据绑定
我们知道,AngularJs中的数据绑定是双向绑定的,View的改变,会改变Model,Model的改变也会改变View中的值,废话不多说,我们直接上代码。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app>
<input type="text" ng-model="name"/>
{{name}}
<input type="text" ng-model="name"/>
</body>
<script type="text/javascript" src="../public/javascripts/lib/angular.js"></script>
</html>
代码说明:
1、添加angularjs的引用。
2、使用指令ng-app告诉angularjs应该管理页面的哪一部分。
3、{{name}}这是angularjs的表达式,angularjs的表达式是通过$parse服务解释执行的,关于$parse我后续会讲。讲到这里,简单说一下angularjs表达式跟javascript表达式的区别:
a) angularjs的属性求值是对于scope的,而javascript是针对于window。
b) angularjs表达式的值是宽容的,就是说,对于undefined,null这些值,在angularjs里面是允许的,不会报错。
c) angularjs中,没有流控制语句,比如:条件分支,循环,抛出异常。
d) angularjs中,我们还可以把表达式的值传入过滤器链(filter chains),关于filter我会在后续讲。
4、<input type="text" ng-model="name"/> 这里我们是把表单绑定在一个model中,在angularjs中使用ng-model指令,这里model的值就是相当value,而表单本身就是个View,{{name}}以及后面的表单也是个View。我们在第一个表单中输入数字后,后面的两个View就跟着变。
5、效果如下:
关于数据绑定就讲到这,里面涉及的一些概念跟特性会在后面陆陆续续的讲到,既然angularjs是基于MVC或者MVVM的开发方式,本篇已经提到了View跟Model,那一篇我将讲一下angularjs的控制器跟angularjs的模块。
02、AngularJs的数据绑定的更多相关文章
- 10分钟学会AngularJS的数据绑定
前言:为什么要用AngularJS? 相信用过.NetMVC的人都知道用rezor绑定数据是一件很爽的事情,C#代码直接在前台页面中输出.然后这种比较适用于同步请求. 当我们的项目离不开异步请 ...
- AngularJS双向数据绑定
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- AngularJS基础02 神奇的数据绑定(Binding)
作者:arccosxy 转载请注明出处:http://www.cnblogs.com/arccosxy/ 上一节,我们在JS中声明一个scope变量然后在HTML直接访问它,这非常的酷.但是Angu ...
- 关于AngularJs,数据绑定与自定义验证
最近开始着手学起了Angular,抱着好奇的心情开始研究了起来.忽然发现angular可以巧妙而方便的进行数据的绑定验证啊什么的.(当然,我只是刚开始学,所有可能有更强大的功能,只是我还没有看到) 那 ...
- AngularJS笔记---数据绑定
一.数据绑定 1.简单绑定 下面实现了一个简单的加法运算的绑定, A.ng-app:表示该div以内都在AngularJS的应用, 去掉ng-app="" 那么后面的绑定都将无效 ...
- AngularJS 的数据绑定
单向绑定(ng-bind) 和 双向绑定(ng-model) 的区别 ng-bind 单向数据绑定($scope -> view),用于数据显示,简写形式是 {{}}. 1 <span n ...
- Vue、AngularJS 双向数据绑定解剖
数据与视图的绑定与同步,最终体现在对数据的读写处理过程中,也就是 Object.defineProperty() 定义的数据 set.get 函数中.Vue 中对于的函数为 defineReactiv ...
- 关于 AngularJS 的数据绑定
单向绑定(ng-bind) 和 双向绑定(ng-model) 的区别 ng-bind 单向数据绑定($scope -> view),用于数据显示,简写形式是 {{}}. 1 <span n ...
- AngularJS入门心得2——何为双向数据绑定
前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉 ...
随机推荐
- EditTextPreference点击后输入框显示隐藏内容,类似密码输入(转)
http://bbs.anzhuo.cn/thread-928131-1-1.html EditTextPreference点击后输入框显示隐藏内容,类似密码输入... [复制链接] aski ...
- Python—使用__slots__限制实例的属性
如果我们想要限制实例的属性怎么办?比如,只允许对Student实例添加name和age属性. 为了达到限制的目的,Python允许在定义class的时候,定义一个特殊的__slots__变量,来限制该 ...
- java解析中国行政区域并在页面显示实现动态逐级筛选
一.实现目标 首先会有一个存放中国行政区域数据的一个txt文件,用java读取并解析出来,并在页面上通过下拉框的形式展示出来.实现效果如下图,当选择完省份后,在选择该省份下的城市,然后在选择该城市下的 ...
- HTML页面弹出自定义对话框带遮蔽罩(使用JavaScript)
转载:http://blog.sina.com.cn/s/blog_610f47c50100ohe4.html 原理其实很简单:首先绘制弹出的自定义对话框,将其使用display:none隐藏,因为设 ...
- sql server数据库区分大小写
来源http://blog.sina.com.cn/s/blog_457d6e63010108tv.html 未测试过 SQL SERVER 2000/2005中默认不区分大小写,可以通过collat ...
- Socket accept failed
启动tomcat显示如下错误: java.net.SocketException: select failed at java.net.PlainSocketImpl.socketAccept(Nat ...
- Codeforces 740A. Alyona and copybooks 模拟
A. Alyona and copybooks time limit per test: 1 second memory limit per test: 256 megabytes input: st ...
- docke部署mysql
#1 docker pull mysql #2 docker run -v /data/var/mysql/:/var/lib/mysql -e MYSQL_ROOT_PASSWORD=k ...
- Chocolatey
知乎上有人提到如何节省时间, 1.自动化 2.批量化 Chocolatey (https://chocolatey.org/)是一个自动化程序安装工具.今天试用了一下 ,想想每年因为安装软件而损失的时 ...
- javascript:history.go()和History.back()的区别(转载)
javascript:history.go()和History.back()的区别 <input type=button value=刷新 onclick="window. ...