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 ...
随机推荐
- 使用JMeter做压力测试
使用JMeter做压力测试 1.下载Jmeter 地址:http://jmeter.apache.org/download_jmeter.cgi 2.启动jmeter 运行bin/jmeter.bat ...
- 通过layout实现可拖拽自动排序的UICollectionView
文/CenturyGuo(简书作者)原文链接:http://www.jianshu.com/p/8d1bf1838882著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. Translat ...
- 纯js滑动脚本
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- lvm拉伸逻辑卷分区小总结
文件系统 容量 已用 可用 已用% 挂载点 /dev/mapper/vg_znl-lv_root ...
- Error:Could not determine Java version-- 关于Android Studio JDK设置和JVM version设置
最近在装AS的时候遇到一个问题,新建工程后,编译报错,Error:Could not determine Java version 不言而喻:可定是JDK的问题,网上查到2中可能性 第一:就是JDK路 ...
- java下文件遍历,与删除
package cn.stat.p1.file; import java.io.File; public class newfilelist { /** * @param args */ public ...
- Popular Cows (POJ No.2186)
Description Every cow's dream is to become the most popular cow in the herd. In a herd of N (1 <= ...
- CSS阻止文本选择
在日常运用中,经常遇到点击按钮/菜单的时候,选中了文本,为了避免这种情况,可以使用纯css来解决这个问题(IE10+),对于旧版本的就只能用js:onselectstart = 'return fal ...
- CREATE DATABASE
CREATE DATABASE IF NOT EXISTS `focusdata` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;USE `fo ...
- LeetCode_Minimum Path Sum
iven a m x n grid filled with non-negative numbers, find a path from top left to bottom right which ...