1、方向1：model->View模型数据绑定到视图

绑定的方式：①双花括号 ②常见的ng指令（ngRepeat ngIf ngShow....）

效果：数据一旦绑定到视图上，随着数据的修改，视图会自动更新。

例子：点击按钮，实现数字的自增（count++），并显示在视图中。

对比：
DOM操作方式：查找元素、操作元素
angular：修改model数据

2、方向2：View->Model将视图中用户的输入/操作 绑定到模型数据

实现方式： ngModel

双向数据绑定：ngModel可以实现双向数据绑定，将定义好的模型数据绑定到视图，也可以将用户的输入的结果绑定到数据上。

结果：

代码：

<html ng-app="myModule">

<head lang="en">

    <meta charset="UTF-8">

    <script src="js/angular.js"></script>

    <title></title>

</head>

<body>

    <div ng-controller="myCtrl">

        <input type="text" ng-model="inputTxt"/>

        <h1>{{inputTxt}}</h1>

    </div>

<script>

    var app=angular.module('myModule',['ng']);

    app.controller('myCtrl',function($scope){

        $scope.inputTxt = '';

    })

</script>

</body>

</html>

结果：

代码：

<html ng-app="myModule">

<head lang="en">

    <meta charset="UTF-8">

    <script src="js/angular.js"></script>

    <title></title>

</head>

<body>

    <div ng-controller="myCtrl">

        <input type="text" ng-model="inputTxt"/>

        <h1>{{inputTxt}}</h1>

    </div>

<script>

    var app=angular.module('myModule',['ng']);

    app.controller('myCtrl',function($scope){

        $scope.inputTxt = 'zhang';

    })

</script>

</body>

</html>

ng 双向数据绑定的更多相关文章

  1. ng 双向数据绑定 实现 注册协议效果

    效果: 代码: <!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> ...

  2. ng双向数据绑定

    http://blog.csdn.net/callmekongkong/article/details/54601585

  3. angularJs初体验，实现双向数据绑定！使用体会：比较爽

    使用初体验:ng 双向数据绑定: 最简单的双向数据绑定:(使用默认模块控制) <body ng-app> <input type="text" ng-model= ...

  4. angularJs：双向数据绑定

    示例1 <!DOCTYPE html> <html ng-app> <head> <meta charset="UTF-8" /> ...

  5. AngularJs学习笔记4——四大特性之双向数据绑定

    双向数据绑定 方向1:模型数据(model)绑定到视图(view) 实现方法:①.{{model变量名}}  ②.常用指令(ng-repeat) 方向2:将视图(view)中用户输入的数据绑定到模型数 ...

  6. angular4.0中form表单双向数据绑定正确姿势

    issue:用[(ngModel)]="property"指令双向数据绑定,报错. reason1:使用ngModel绑定数据需要注入FormsModule模块,在app.modu ...

  7. Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定

    Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定 创建 angular 组件 https://github.com/angular/angular- ...

  8. 第217天：深入理解Angular双向数据绑定的原理

    一.理解angular双向数据绑定 双向绑定是新的前端框架中频繁出现的一个新词汇,也是mvvm的核心原理.angularjs五条核心信念中的数据驱动,便是由双向绑定进行完成. 那么什么是双向绑定,下面 ...

  9. angularJs的指令系统和双向数据绑定

    一.langularJs的指令系统 <!DOCTYPE HTML> <html ng-app><!--这种以ng开头的就是指令系统,初始化的一个指令,不仅可以加在html ...

随机推荐

  1. Spring.Net+NHibernate+Castle学习网站

    1.刘冬  http://www.cnblogs.com/GoodHelper/archive/2009/10/16/1584243.html 2.学习资料 http://www.cnblogs.co ...

  2. CentOS中nginx负载均衡和反向代理的搭建

    1: 修改centos命令行启动(减少内存占用): vim /etc/inittab :initdefault: --> 修改5为3 若要界面启动使用 startx 2:安装jdk )解压:jd ...

  3. ThinkPHP框架之模型

    一.数据库配置 在父类配置ThinkPHP/Conf/convention.php中,找到数据库设置部分: 将这部分复制到我们模块的配置文件Home/Conf/config.php中,将需要的参数写上 ...

  4. $python正则表达式系列（6）——"或"表达式的用法

    import re s1 = u'距离地铁5号线189米' s2 = u'距离地铁5号线(环中线)189米' s3 = u'距离地铁5号线(环中线)189米' p1 = re.compile(u'号线 ...

  5. 设计模式（四） 手动实现AOP代理

    1.事务的使用: 每次对数据库操作我们都需要开启事务,事务开启后,我们就需要对数据库进行一次或者多次操作,当操作完成后就需要提交事务.比如一个业务中多次操作数据库,但是当某个方法出错的时候,我们需要整 ...

  6. git-bash使用ctrl C无法终止nodemon的执行

    原因: git的bug 解决:git版本降级为2.10.0好了

  7. cache工作原理

    转:http://www.360doc.com/content/11/0307/21/3791508_99049437.shtml

  8. Django学习笔记之Django模版系统

    官方文档 常用语法 只需要记两种特殊符号: {{  }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 变量 {{ 变量名 }} 变量名由字母数字和下划线组成. 点(.)在模板语言中有特 ...

  9. ping主机脚本

    #!/bin/bash #ping net='172.16.1' uphosts=0 downhosts=0 for i in {1..254};do ping -c 1 -w 1 ${net}.${ ...

  10. 20145235李涛《网络对抗》Exp2 后门原理与实践

    Windows获得Linux Shell Linux获得windows shell 实验内容 使用netcat获取主机操作shell,cron启动 使用socat获取主机shell,任务计划启动 使用 ...