双向数据绑定

方向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——四大特性之双向数据绑定的更多相关文章

  1. AngularJs学习笔记2——四大特性之MVC

    angularJs的四大特性 ①.采用MVC的设计模式 ②.双向数据绑定 ③.依赖注入 ④.模块化设计 现在细说一下MVC的设计模式: MVC: Model(模型)--项目中的数据 View(视图)- ...

  2. AngularJs学习笔记7——四大特性之模块化设计

    模块化设计 1.引用自定义模块并调用 自定义模块中,如果有一些服务.封装好笑模块,在另外一个模块中(声明的时候,在依赖列表中加入要引入的模块) var app02 = angular.module(' ...

  3. AngularJs学习笔记6——四大特性之依赖注入

    压缩工具:YUI-compressor 为了优化网页功能,对一些脚本文件进行压缩,比如:删除所有的注释和空格等,简化形参.但是AngularJs模块中可以声明多种组件,如控制器.指令.过滤器.服务等. ...

  4. AngularJS学习笔记（三）数据双向绑定

    双向绑定 双向绑定是AngularJS最实用的功能,它节省了大量的代码,使我们专注于数据和视图,不用浪费大量的代码在Dom监听.数据同步上,关于双向更新,可看下图: 下面,我们通过代码来实现.先不要纠 ...

  5. AngularJS学习笔记(一) 关于MVVM和双向绑定

    写在前面: 因为需要开始学习ng,之前在知乎上听大神们介绍ng的时候说这个坑如何的大,学了一阵(其实也就三天),感觉ng做的很大很全,在合适的情境你可以完全使用ng搞定一切.这一点从诸如jqLite之 ...

  6. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  7. AngularJS学习笔记2——AngularJS的初始化

    本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...

  8. AngularJs学习笔记--Using $location

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...

  9. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

随机推荐

  1. JAVA的RSA加密算法工具类

    须要用到一个jar http://www.bouncycastle.org/latest_releases.html 须要注意的问题 JS用同一秘钥生成的密文用java解密出来是逆序的,即js加密12 ...

  2. 如何在虚拟机中安装Win7系统

    在虚拟机里安装系统,可以很方便我们对系统的各项功能进行测试,而又不会影响本机系统,本节就介绍如何在虚拟机中安装Win7系统 . 工具/原料 vm9虚拟机 电脑一台 方法/步骤 1 在百度上搜索win7 ...

  3. 对return 语句的正确性和效率进行检查

    注意事项如下: 1. return 语句不可返回指向"堆栈内存“的”指针“或者”引用“,因为该内存单元在函数体结束时被自动释放. //错误 char* Func(void) { char s ...

  4. Fiddler使用笔记

    http://www.cnblogs.com/TankXiao/archive/2012/02/06/2337728.html#basic   1.filter的使用,跟踪某个网站的访问,例如:hr. ...

  5. MS SQL到Oracle的数据迁移笔记

    MS SQL到Oracle的数据迁移笔记 一.任务背景 旧系统使用MS SQL Server数据库,新系统使用Oracle数据库,现在需要将旧系统中的数据迁移到新系统中,旧数据按照约定的规则转换后,能 ...

  6. 线段树hdu1754

    #include<iostream>#include<stdio.h>using namespace std;const int maxa=200005;int val[max ...

  7. POJ2976 Dropping tests(二分+精度问题）

    ---恢复内容开始--- POJ2976 Dropping tests 这个题就是大白P144页的一个变形,二分枚举x,对a[i]-x*b[i]从大到小进行排序,选取前n-k个判断和是否大于等于0,若 ...

  8. 三级联动数据表db_nove.sql

    -- phpMyAdmin SQL Dump -- version 2.11.2 -- http://www.phpmyadmin.net -- -- 主机: localhost -- 生成日期: 2 ...

  9. Visual studio 内存不足的解决方案（out of memory）

    编译Visual Studio项目,如果出现"out of memory "的编译错误,可以进行如下操作,加大应用程序可以使用的内存. 请先备份好系统和设置好系统还原点,大体步骤是 ...

  10. IIC总线协议---以存储芯片at24c64为例

    IIC总线协议 前言:年前给老师做个红外抄表系统,,现在对当中用到的一些模块总结一下. 1.只有在总线空闲时才允许启动数据传送. 2.在数据传送过程中,当时钟线为高电平时,数据线必须保持稳定状态,不允 ...