一.数据绑定

1.简单绑定

下面实现了一个简单的加法运算的绑定,

A.ng-app：表示该div以内都在AngularJS的应用, 去掉ng-app="" 那么后面的绑定都将无效

B.ng-models :  用于数据绑定, 也就是两个input的里面输入的信息都会绑定到val1和val2变量里面。

C.{{ FiledName }}: 双括号也是用于数据的绑定.

<!DOCTYPE html>

<html>

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

<script type="text/javascript">

</script>

<head>

    <div ng-app="">

       <div >

            <input ng-model="val1" type="number" placeholder="input your number"> +

            <input ng-model="val2" type="number" placeholder="input your numer"> =

            <span>{{ val1+val2 ||  }}</span>

        </div>

    </div>

</head>

<body>

</body>

</html>

2.  $scope的使用

上面有提到通过ng-model实现数据的绑定，其实所谓的数据绑定其实就是绑定到了$scope上.下面通过编写SumController方法实现了一个点击submit按钮就计算出两个整数之和.

<!DOCTYPE html>

<html>

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

<script type="text/javascript">

    function SumController($scope){

         $scope.addTwoNumber = function(){

             $scope.addNumber = $scope.val2+$scope.val1;

         };

     }

</script>

<head>

    <div ng-app="">

       <div ng-controller="SumController" >

            <input ng-model="val1" type="number" placeholder="input your number"> +

            <input ng-model="val2" type="number" placeholder="input your numer">

            <button ng-click="addTwoNumber()">Submit</button>

            <span>{{ addNumber|| }}</span>

        </div>

    </div>

</head>

<body>

</body>

</html>

3.$apply()用法

上面有提到通过ng-model实现数据的绑定，其实所谓的数据绑定其实就是绑定到了$scope上.下面是一个简单的时钟程序，通过setInterval方法实现每过一秒更新clock值，在绑定中我们还是用到了apply方法.

A. setInterval 中调用updateClock()后会发现chrome的console中会每过一秒打印当前时间，可是界面没更新

B. setInterval 中调用$scope.$apply(updateClock)后会发现chrome的console会每过1秒答应一次当前时间，并且界面更新时间

C.为何为这样？其实是调用setInterval方法循环触发updateClock方法与我们上面的通过ng-click的机制不同. ng-click会自动$watch,监控数据变化从而更新界面。而原生JavaScript的setInterval中更改了数据无法监控到，所以要通过$apply来实现。

理解Angular中的$apply()以及$digest()

<!DOCTYPE html>

<html>

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

<script type="text/javascript">

   function ClockController($scope){

       var updateClock = function(){

             $scope.clock = new Date();
             console.log($scope.clock); //数据观察

       }

       var clockInterval = setInterval(function(){

             // updateClock(); -- 不会更新

             $scope.$apply(updateClock);

       },);

       updateClock();

   }

</script>

<head>

    <div ng-app="">

       <div ng-controller="ClockController" >

            <h1>{{ clock }}</h1>

        </div>

    </div>

</head>

<body>

</body>

</html>

二. 模块化
             做过.net开发的都知道，在开发中我们会声明不同的命名空间和不同类，来实现代码的模块化管理，其实AngularJs同样也提供了类似的方法，我们可以通过ng-app和ng-contrller实现代码的模块化管理.

A.通过angular.module在后台注册一个模块,然后通过app.controller来添加contrller,这里的'SumController'和'TimeController'属于兄弟模块，两则之间的Scope绑定对象互不干扰.

B.一个html页面后台只能注册一个module，如果注册多个会报错.

<!DOCTYPE html>

<html>

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

<script type="text/javascript">

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

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

         $scope.addTwoNumber = function(){

             $scope.addNumber = $scope.val2+$scope.val1;

         };

     });

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

         $scope.timeTwoNumber = function(){

             $scope.timeNumber = $scope.val2 * $scope.val1;

         };

     });

</script>

<head>

    <div ng-app="app">

       <div ng-controller="SumController" >

            <input ng-model="val1" type="number" placeholder="input your number"> +

            <input ng-model="val2" type="number" placeholder="input your numer">

            <button ng-click="addTwoNumber()">Submit</button>

            <span>{{ addNumber|| }}</span>

        </div>

        <br/>

        <div ng-controller="TimeController">

            <input ng-model="val1" type="number" placeholder="input your number"> *

            <input ng-model="val2" type="number" placeholder="input your numer">

            <button ng-click="timeTwoNumber()">Submit</button>

            <span>{{ timeNumber|| }}</span>

        </div>

    </div>

</head>

<body>

</body>

</html>

AngularJS笔记---数据绑定的更多相关文章

  1. 学习笔记 - 数据绑定之knockout

    参考: http://www.cnblogs.com/TomXu/archive/2011/11/21/2257154.html http://knockoutjs.com/documentation ...

  2. 10分钟学会AngularJS的数据绑定

     前言:为什么要用AngularJS?  相信用过.NetMVC的人都知道用rezor绑定数据是一件很爽的事情,C#代码直接在前台页面中输出.然后这种比较适用于同步请求.   当我们的项目离不开异步请 ...

  3. AngularJS双向数据绑定

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. AngularJs学习笔记-数据绑定、管道

    数据绑定.管道 (1)数据绑定(Angular中默认是单向绑定) 1.[]方括号 可以用于子组件传值 由于是单向绑定,所以当子组件中的iStars属性发生改变时,不会影响到父组件中product.ra ...

  5. AngularJs 笔记

    初识 directive 指令 ng-app 初始化一个AngularJs应用程序(通过一个值(比如 ng-app="myModule")连接到代码模块.) ng-init 初始化 ...

  6. AngularJS笔记--自定义指令

    在前端开发中, 我们会遇到很多地方都会用到同一种类型的控件.AngularJS提供了自定义指令功能,我们可以在指令里面定义特定的html模板.提供给前台html调用. 一. 指令的简单定义.  下面定 ...

  7. AngularJS笔记---注册服务

    在前面的笔记中,了解到AngularJS的后台控制可以在Controller里面实现. 可是如果所有的逻辑代码都写到Controller会显得该Controller过于臃肿. 不方便维护, Angul ...

  8. 02、AngularJs的数据绑定

    我们知道,AngularJs中的数据绑定是双向绑定的,View的改变,会改变Model,Model的改变也会改变View中的值,废话不多说,我们直接上代码. <!DOCTYPE html> ...

  9. AngularJS 的数据绑定

    单向绑定(ng-bind) 和 双向绑定(ng-model) 的区别 ng-bind 单向数据绑定($scope -> view),用于数据显示,简写形式是 {{}}. 1 <span n ...

随机推荐

  1. Resumable.js – 基于 HTML5 File API 的文件上传

    Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...

  2. Soundslice – 美妙乐谱！Web 技术高大上的应用

    Web 技术的不断发展让我们能够开发各种好玩的功能.这里给大家分享一个使用 HTML5 技术实现的在线乐谱,可以播放的哦,也可以选择一个片段进行循环播放.赶紧来体验一下:) 您可能感兴趣的相关文章 1 ...

  3. 如何垂直居中div？面试经常问到

    水平居中:给div设置一个宽度,然后添加margin:0 auto属性 div{ width:200px; margin:0 auto;} 让绝对定位的div居中 ;;;;} 重点来了! 水平垂直居中 ...

  4. [读码]HTML5像素文字爆炸重组

    [边读码,边学习,技术也好,思路也罢] [一款基于HTML5技术的文字像素爆炸重组动画特效,我们可以在输入框中指定任意文字,点击确定按钮后,就会将原先的文字爆炸散去,新的文字以像素点的形式组合起来,看 ...

  5. 生成iOSAPP的二维码

    1.打开iTunes,在"应用"里面搜索要找的APP 2.右键要生成二维码的APP,选择"拷贝链接" 3.百度一个二维码生成器 4.把刚才拷贝的链接粘贴进去,点 ...

  6. 【C语言】C语言数据类型

    目录: [数据类型图] [基本数据类型]   · 整型   · 实型   · 字符型   · 布尔类型 1.数据类型图 2.基本数据类型 · 整型 用于准确表示整数,根据表示范围的不同分为三种:短整型 ...

  7. Android App 开发技能图谱

    操作系统 Windows/MacOSX/Linux 编程语言 Java HTML/JS (Hybrid/Web App) C/C++ (NDK) SQL (DB) Kotlin 开发工具 IDE An ...

  8. IOS 四舍五入 进一法 去尾法

    float numberToRound; int result; numberToRound = 4.51; result = (int)roundf(numberToRound); NSLog(@& ...

  9. DragLayout: QQ5.0侧拉菜单的新特效

    一.项目概要 1.1 项目效果如图: 1.2 需要使用到的技术   ViewDragHelper: 要实现和QQ5.0侧滑的特效,需要借助谷歌在2013年I/O大会上发布的ViewDragHelper ...

  10. 【Android】不依赖焦点和选中的TextView跑马灯【2】

    前言 之前有写一篇TextView跑马灯的效果,后来实际项目中有发现新的问题,比如还是无法自动跑,文本超过了显示区域就截取的问题,今天换了一种思路来实现,更简单更好用. 声明 欢迎转载,但请保留文章原 ...