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,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉 ...
随机推荐
- 9×9扫雷游戏代码-C写的
#include <stdio.h> #include <stdlib.h> //画棋盘 a雷表 b周围雷数表 c打开表 ][],][],][]) { ,j=; ;i<; ...
- Xcode LaunchImage 载入界面大小设置
iPhone Portrait iOS 8-Retina HD 5.5 (1242×2208) @3xiPhone Portrait iOS 8-Retina HD 4.7 (750×1334) @2 ...
- JAVA 中数据库连接的方法之一
/** * 数据库连接类 * */ package com.cn.MysqlConnect; import java.sql.Connection;import java.sql.DriverMana ...
- java.lang.IllegalStateException: The specified child already has a parent. You must call removeView() on the child's parent first.
在ViewPager中,用Fragment显示页面时,报错: java.lang.IllegalStateException: The specified child already has a pa ...
- java_method_下拉框成json
List<String[]> proList=service.getUserList(); int nTotal=0; String proJson="["; proJ ...
- [题解]USACO 1.3 Ski Course Design
Ski Course Design Farmer John has N hills on his farm (1 <= N <= 1,000), each with an integer ...
- easy ui 框架
Easy UI 准备工作(搭建) 1.在WebRoot 的目录下创建js 文件夹,在文件夹中倒入一下两个包 Jquery.easyui.min.js jquery.min.js 2.在WebRoot ...
- PHP读取Excel数据写入数据库(包含图片和文字)
public function test(){ $exts = 'xlsx'; //导入PHPExcel类库,因为PHPExcel没有用命名空间,只能inport导入 import("Org ...
- python 模拟登录--day1
---------------edit-in-windows-by-pycharm---------------------import randomuname = "mologa" ...
- 在Visual Studio 2012 Blue theme下使用Dark theme的文本编辑器颜色设置
Visual Studio 2012 默认提供了3种color theme: blue,light,和dark.其中dark的文本编辑器颜色设定很爽,可是整个菜单项加上一些小的窗口如Find Resu ...