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. go——接口

    Go语言提供了另外一种数据类型,即接口,它把所有具有共性的方法定义在一起,任何其它类型只要实现了这些方法就是实现了这个接口. 接口代表一种调用契约,是多个方法声明的集合.在某些动态语言里,接口(int ...

  2. 转：[NHibernate]视图处理

    转自:http://www.cnblogs.com/wolf-sun/p/4082899.html 目录 写在前面 文档与系列文章 视图 一个例子 总结 写在前面 前面的文章主要讲了对物理数据表的操作 ...

  3. React:快速上手(3)——列表渲染

    React:快速上手(3)——列表渲染 使用map循环数组 了解一些ES6 ES6, 全称 ECMAScript 6.0 ,是 JaveScript 的下一个版本标准,2015.06 发版.ES6 主 ...

  4. HDU 3966 Aragorn's Story (树链剖分入门题)

    树上路径区间更新,单点查询. 线段树和树状数组都可以用于本题的维护. 线段树: #include<cstdio> #include<iostream> #include< ...

  5. Ubuntu 14.04上架IPSec+L2TP的方法

    最简单的方法是使用脚本一步一步地进行配置.我用的是philplckthun写的脚本,修改了一下获取服务器IP的方法:脚本文件. 在ubuntu下运行: sh setup.sh 配置配置完成后,服务器端 ...

  6. MySQL性能优化之max_connections参数

    很多开发人员都会遇见”MySQL: ERROR 1040: Too many connections”的异常情况,造成这种情况的一种原因是访问量过高,MySQL服务器抗不住,这个时候就要考虑增加从服务 ...

  7. 0927—MySQL常用语句集合

    一.连接MySQL 格式: mysql -h 主机地址 -u 用户名 -p 用户密码 1.例1:连接到本机上的MYSQL. 首先在打开DOS窗口,然后进入目录 mysql bin,再键入命令mysql ...

  8. python django model filter 条件过滤，及多表连接查询、反向查询，某字段的distinct[转]

    1.多表连接查询:当我知道这点的时候顿时觉得django太NX了.   class A(models.Model):     name = models.CharField(u'名称')   clas ...

  9. LeetCode——Find All Numbers Disappeared in an Array

    LeetCode--Find All Numbers Disappeared in an Array Question Given an array of integers where 1 ≤ a[i ...

  10. HUE中Oozie执行Hive脚本

    Oozie执行hive,传入参数1. 新建一个workflow 2. 拖入一个hive2 3. hive脚本如下 CREATE TABLE IF NOT EXISTS spider_tmp.org_i ...