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. ZOJ 3261 Connections in Galaxy War (逆向+带权并查集)

    题意:有N个星球,每个星球有自己的武力值.星球之间有M条无向边,连通的两个点可以相互呼叫支援,前提是对方的武力值要大于自己.当武力值最大的伙伴有多个时,选择编号最小的.有Q次操作,destroy为切断 ...

  2. Codeforces - 55D Beautiful numbers (数位dp+数论)

    题意:求[L,R](1<=L<=R<=9e18)区间中所有能被自己数位上的非零数整除的数的个数 分析:丛数据量可以分析出是用数位dp求解,区间个数可以转化为sum(R)-sum(L- ...

  3. for 循环与嵌套

    循环:反复执行某段代码.循环四要素:初始条件,循环条件,循环体,状态改变 for(初始条件;循环条件;状态改变){ 循环体} 给出初始条件,先判断是否满足循环条件,如果不满足条件则跳过for语句,如果 ...

  4. 设计模式（三） cglib代理

    1.1.cglib代理,也可也叫子类代理 Cglib代理,也叫做子类代理.我们知道,JDK的动态代理机制只能代理实现了接口的类,而不能实现接口的类就不能使用JDK的动态代理.cglib是针对类来实现代 ...

  5. netty2---服务端和客户端

    客户端: package com.client; import java.net.InetSocketAddress; import java.util.Scanner; import java.ut ...

  6. Linux时间设置与iptables命令

    日期与时间设置 timedatectl:显示目前时区与时间等信息 [root@localhost zhang]# timedatectl Local time: Thu 2018-01-18 10:1 ...

  7. log4j日志的配置--Debug

    ############################### 日志记录器定义 ################################ 日志输出级别 OFF.DEBUG.INFO.WARN. ...

  8. yum安装mysql后root用户的临时密码

    1.查看root用户临时随机密码 yum 安装mysql后,无法通过空密码登录数据库,如下: [root@ mysql]# mysql -u root -p Enter password: ERROR ...

  9. 【bzoj3170】[Tjoi2013]松鼠聚会（数学题）

    题目传送门:https://www.lydsy.com/JudgeOnline/problem.php?id=3170 这道题要在n个点中求一个点使其他点到该点的切比雪夫距离最小. 有个结论:$ (x ...

  10. socket 关于同一条TCP链接数据包到达顺序的问题

    转:http://blog.csdn.net/l1008610/article/details/52197602 以前作者也一直以为数据包先发的不一定先到,直到今天才意识这个问题的缺陷,数据包是不一定 ...