AngularJs学习笔记4——四大特性之双向数据绑定
双向数据绑定
方向1：模型数据（model）绑定到视图（view）
实现方法：①.{{model变量名}} ②.常用指令（ng-repeat）
方向2：将视图（view）中用户输入的数据绑定到模型数据(model)
实现方法：ng-model指令，用在表单组件中（input select）
$watch()监听模型变量值的改变—>执行指定的方法
$watch(‘变量名’,function(){…});
一个很简单的栗子：
实时获取输入框中输入的内容，打印在控制台
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="UTF-8">
<title>双向数据绑定</title>
<script src="js/angular.js"></script>
</head>
<body ng-controller="myCtrl">
<!--通过ng-model把视图数据绑定到模型上，同时又通过{{}}的形式把模型数据绑定到视图上，实现双向数据绑定-->
<input type="text" ng-model="kw"/>
<p>{{kw}}</p>
<script>
var app = angular.module('myApp',['ng']);
app.controller('myCtrl', function ($scope) {
$scope.$watch('kw',function(){
console.log($scope.kw);
})
});
</script>
</body>
</html>
AngularJs学习笔记4——四大特性之双向数据绑定的更多相关文章
- AngularJs学习笔记2——四大特性之MVC
angularJs的四大特性 ①.采用MVC的设计模式 ②.双向数据绑定 ③.依赖注入 ④.模块化设计 现在细说一下MVC的设计模式: MVC: Model(模型)--项目中的数据 View(视图)- ...
- AngularJs学习笔记7——四大特性之模块化设计
模块化设计 1.引用自定义模块并调用 自定义模块中,如果有一些服务.封装好笑模块,在另外一个模块中(声明的时候,在依赖列表中加入要引入的模块) var app02 = angular.module(' ...
- AngularJs学习笔记6——四大特性之依赖注入
压缩工具:YUI-compressor 为了优化网页功能,对一些脚本文件进行压缩,比如:删除所有的注释和空格等,简化形参.但是AngularJs模块中可以声明多种组件,如控制器.指令.过滤器.服务等. ...
- AngularJS学习笔记（三）数据双向绑定
双向绑定 双向绑定是AngularJS最实用的功能,它节省了大量的代码,使我们专注于数据和视图,不用浪费大量的代码在Dom监听.数据同步上,关于双向更新,可看下图: 下面,我们通过代码来实现.先不要纠 ...
- AngularJS学习笔记(一) 关于MVVM和双向绑定
写在前面: 因为需要开始学习ng,之前在知乎上听大神们介绍ng的时候说这个坑如何的大,学了一阵(其实也就三天),感觉ng做的很大很全,在合适的情境你可以完全使用ng搞定一切.这一点从诸如jqLite之 ...
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
- AngularJS学习笔记2——AngularJS的初始化
本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...
- AngularJs学习笔记--Using $location
原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...
- AngularJs学习笔记--directive
原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...
随机推荐
- Linux下编译安装Apache及模块
Apache是时下最流行的Webserver软件之中的一个,支持多平台,可高速搭建web服务,并且稳定可靠.并可通过简单的API扩充.就能够集成PHP/Python等语言解释器. 文章这里解说怎样在l ...
- Nginx的安装及简单配置
Nginx安装 1.下载相关组件 yum install -y gcc gcc-c++ #安装C/C++编译器 yum -y ins ...
- swift和oc混编
请参考这篇博客:点击查看
- 一个小的程序--实现中英文切换（纯css）
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...
- JAVA-FileInputStream之read方法
今天一个友询问FileInputStrem方法的read()和read(byte b) 方法为什么都用-1来判断读文件结束的问题,在此和大家一起学习下. 关于FileInputStream 它用于读取 ...
- (转)SQL Server 2008怎样编辑200行以上的数据
刚换SQL Server2008 不久,感觉运行速度.编辑提示都比05版的提升不少,但是在维护考试系统中遇到一个05中没有的问题:05中有“打开表”可以编辑所有数据行,到了08变成了“打开前1000行 ...
- C#多线程实践——线程同步
下面的表格列展了.NET对协调或同步线程动作的可用的工具: 简易阻止方法 构成 目的 Sleep 阻止给定的时间周期 Join 等待另一个线程完成 ...
- C++ Primer 5th 第4章 表达式
表达式是运算对象及运算符组成的式子,表达式求值将得到一个结果,单独的变量或者字面值也算表达式,结果是其本身. 运算符分为:一元运算符.二元运算符.三元运算符.一元即一个作用对象,二元两个作用对象,以此 ...
- Win7下部署 .NET MVC网站 之 HTTP错误 403.14-Forbidden 解决方法
今天在 IIS 7 发布MVC 站点时 遇到 ”HTTP错误 403.14-Forbidden Web 服务器被配置为不列出此目录的内容 “ 的错误提示. 一番折腾后发现在web.config 中加入 ...
- 使用PHP-Barcode轻松生成条形码（一）
最近由于工作需要,研究了一下PHP如何生成条形码.虽然二维码时下比较流行,但是条形码依然应用广泛,不可替代.园子里有很多讲利用PHP生成条形码的文章,基本上都是围绕Barcode Bakery的,它虽 ...