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

绑定的方式:①双花括号 ②常见的ng指令(ngRepeat ngIf ngShow....)

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

例子:点击按钮,实现数字的自增(count++),并显示在视图中。

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

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

实现方式: ngModel

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

结果:

代码:

  1. <html ng-app="myModule">
  2. <head lang="en">
  3. <meta charset="UTF-8">
  4. <script src="js/angular.js"></script>
  5. <title></title>
  6. </head>
  7. <body>
  8. <div ng-controller="myCtrl">
  9. <input type="text" ng-model="inputTxt"/>
  10. <h1>{{inputTxt}}</h1>
  11. </div>
  12. <script>
  13. var app=angular.module('myModule',['ng']);
  14. app.controller('myCtrl',function($scope){
  15. $scope.inputTxt = '';
  16. })
  17. </script>
  18.  
  19. </body>
  20. </html>

结果:

代码:

  1. <html ng-app="myModule">
  2. <head lang="en">
  3. <meta charset="UTF-8">
  4. <script src="js/angular.js"></script>
  5. <title></title>
  6. </head>
  7. <body>
  8. <div ng-controller="myCtrl">
  9. <input type="text" ng-model="inputTxt"/>
  10. <h1>{{inputTxt}}</h1>
  11. </div>
  12. <script>
  13. var app=angular.module('myModule',['ng']);
  14. app.controller('myCtrl',function($scope){
  15.  
  16. $scope.inputTxt = 'zhang';
  17. })
  18. </script>
  19.  
  20. </body>
  21. </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. beego——控制器函数

    基于beego的Controller设计,只需要匿名组合beego.Controller就可以,如下所示: type xxxController struct { beego.Controller } ...

  2. Java并发(4):ThreadLocal

    一.对ThreadLocal的理解 ThreadLocal是java.lang包中的一个类,很多地方叫做线程本地变量,也有些地方叫做线程本地存储,其实意思差不多.可能很多朋友都知道ThreadLoca ...

  3. HDU4635

    /* 最终添加完边的图,肯定可以分成两个部X和Y,其中只有X到Y的边没有Y到X的边, 那么要使得边数尽可能的多,则X部肯定是一个完全图,Y部也是, 同时X部中每个点到Y部的每个点都有一条边,假设X部有 ...

  4. 《网络攻防》Web安全基础实践

    20145224陈颢文 <网络攻防>Web安全基础实践 基础问题回答 SQL注入攻击原理,如何防御: 部分程序员在编写代码的时候,没有对用户输入数据的合法性进行判断,黑客利用这个bug在数 ...

  5. 用来在category里加属性的宏

    众所周知,一般的情况下我们是没办法在category里加属性的. 如果想加,需要用到Associated. @interface NSObject (XYFlyweightTransmit) @pro ...

  6. ErrorHandling in asp.net web api

    https://docs.microsoft.com/en-us/aspnet/web-api/overview/error-handling/exception-handling https://d ...

  7. hibernate配置文件的详解

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE hibernate-configurati ...

  8. linux 安装unrar

    Centos 6 32位下安装 wget http://pkgs.repoforge.org/unrar/unrar-4.2.3-1.el6.rf.i686.rpmrpm -ivh unrar-4.2 ...

  9. 不常用的gcd公式

    gcd(a^m-b^m,a^n-b^n)=a^(gcd(m,n))-b^(gcd(m,n))

  10. BOOST学习笔记

    BOOST学习笔记 1 tool #pragma once #include <vector> #include "boost/noncopyable.hpp" #in ...