实现这样的一个需求：页面中某个地方显示某个文本框的值经过计算得到的结果,而且是文本框值每次变化显示的计算结果也跟着动态变化。

在controller中可以声明一个对象，它的一个字段用来存储初始值：

$scope.funding = {startingEstimate:0};

以上，声明了一个funding对象，它的startingEstimate字段用来存储初始值，初始值这里是0.

在controller中还应该声明一个函数，用来把根据初始值计算得到的结果赋值给funding对象的另外一个字段。

$scope.computeNeeded = function(){
    $scope.funding.needed = $scope.funding.startingEstimate * 10;
};

以上，声明了computeNeeded函数，它把funding对象startingEstimate值进过计算后的结果赋值给了funding对象的另外一个字段needed。

好了，页面中的input需要和funding对象的startingEstimate双向绑定起来，用ng-model；input中每次值变化需要调用computeNeeded，用ng-change：

初始值：<input type="text" ng-model="funding.startingEstimate" ng-change="computeNeeded()">

至于显示结果，只管向funding对象的needed字段要就好了：

计算值：{{funding.needed}}

可是，还有一点小问题：现在，只有当input中的值发生变化的时候才会触发computeNeeded()方法，我们希望在页面加载的时候就执行computedNeeded方法。

为此，AngularJS为我们准备了$scope.$watch(被观察对象，执行的动作)，可以把funding对象的startingEstimate字段列为被观察对象，startingEstimate字段的每次变化，都执行computedNeeded()这个动作，包括给startingEstimate字段初始赋值的时候。

$scope.$watch('funding.startingEstimate', $scope.computeNeeded);

完整代码如下：

<!doctype html>



<html ng-app="myApp">



<head>



    <meta charset="UTF-8">



    <title>Untitled Document</title>



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



    <script>



        var myApp = angular.module("myApp",[]);





        myApp.controller("MyController",['$scope',function($scope){



            $scope.funding = {startingEstimate:0};





            $scope.computeNeeded = function(){



                $scope.funding.needed = $scope.funding.startingEstimate * 10;



            };





            $scope.$watch('funding.startingEstimate', $scope.computeNeeded);





            $scope.finish = function(){



                alert("done");



            };



        }]);



    </script>



</head>



<body ng-controller="MyController">





    <form ng-controller="MyController" ng-submit="finish()">



        初始值：<input type="text" ng-model="funding.startingEstimate" ng-change="computeNeeded()">



        计算值：{{funding.needed}}





        <input type="submit" value="提交">



    </form>





</body>



</html>









总结：


● 双向绑定：ng-model
● 文本框值变化事件：ng-change
● 对某个对象实施观察：$scope.$watch(被观察对象，执行的动作)
● 表单提交：ng-submit
● 其它事件：ng-click, ng-dblclick


参考资料：<<用AngularJS开发下一代Web应用>>
												


											
AngularJS双向绑定，手动实施观察的更多相关文章
	

    
								
  1. Angularjs 双向绑定机制解析
		
    文章转自:http://www.2cto.com/kf/201408/327594.html AngularJs 的元素与模型双向绑定依赖于循环检测它们之间的值,这种做法叫做脏检测,这几天研究了一下其 ...
    
		
    2. 
						
  2. angularJS双向绑定和依赖反转
		
    一.双向绑定: UI<-->数据 数据->UI (数据改变UI跟着变) UI->数据 (UI改变数据跟着变) 数据改变->UI改变原理: 监听数据是否改变,如果改变更新U ...
    
		
    3. 
						
  3. AngularJs双向绑定详解
		
    双向绑定的三个重要方法: $scope.$apply() $scope.$digest() $scope.$watch() 一.$scope.$watch() 我理解的$watch就是将对某个数据的监 ...
    
		
    4. 
						
  4. AngularJs双向绑定
		
    模型数据(Data) 模型是从AngularJS作用域对象的属性引申的.模型中的数据可能是Javascript对象.数组或基本类型,这都不重要,重要的是,他们都属于AngularJS作用域对象. An ...
    
		
    5. 
						
  5. AngularJS中数据双向绑定(two-way data-binding)
		
    1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...
    
		
    6. 
						
  6. 深入学习AngularJS中数据的双向绑定机制
		
    来自:http://www.jb51.net/article/80454.htm Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持 ...
    
		
    7. 
						
  7. 我的angularjs源码学习之旅3——脏检测与数据双向绑定
		
    前言 为了后面描述方便,我们将保存模块的对象modules叫做模块缓存.我们跟踪的例子如下 <div ng-app="myApp" ng-controller='myCtrl ...
    
		
    8. 
						
  8. Angular系列----AngularJS入门教程05：双向绑定（转载）
		
    在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f ...
    
		
    9. 
						
  9. angularjs bind与model配合双向绑定 表达式方法输出
		
    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. innobackupex不停库的数据备份并恢复到别的服务器上【转】
			
    1.innobackupex原理: 备份原理 1).首先会开启一个后台检测进程,实时检测myql redo的变化,一旦发现redo中有新日志写入,立即将日志记入后台日志文件xtrabackup_log ...
    
			
    2. 
						
  2. 008_MAC 终端使用技巧
			
    一.常用终端命令. <1>reset 的作用很简单——将目前「终端」屏幕上的内容清空,就好像刚刚打开终端一样. <2>如果你在一条终端命令中发现有输入错误的话,那么用 cont ...
    
			
    3. 
						
  3. LeetCode（23）：合并K个排序链表
			
    Hard! 题目描述: 合并 k 个排序链表,返回合并后的排序链表.请分析和描述算法的复杂度. 示例: 输入: [   1->4->5,   1->3->4,   2-> ...
    
			
    4. 
						
  4. Django Celery定时任务和时间设置
			
    1.Celery加入定时任务 Celery除了可以异步执行任务之外,还可以定时执行任务.在实例代码的基础上写个测试方法: #coding:utf- from celery.task.schedules ...
    
			
    5. 
						
  5. .NetCore关于Cap(RabbitMQ)结合MySql使用出现MySql相关类冲突问题解决办法
			
    问题还原 引用了 DotNetCore.CAP.MySql MySql.Data.EntityFrameworkCore 在使用MySql相关对象的时候会出现如下冲突,在命名空间加入伪空间名称是不能解 ...
    
			
    6. 
						
  6. 【LOJ】#2495. 「AHOI / HNOI2018」转盘
			
    题面 题解 考虑我肯定是从一个人出发,开始依次标记,而不会跳过某个人,因为如果我跳过了,那么我之后回来还需要标记它,比不上我等完它再一直走到最后(因为多了走一圈之后走回它的代价) 我们倍长整个序列,我 ...
    
			
    7. 
						
  7. 【LOJ】#2079. 「JSOI2016」轻重路径
			
    题解 写数据结构的时候我代码就会变得非常非常长 一看别人1.5K 2.3K 我6.3K-- orzzzzz 我们很容易想到离线倒着插入,然而,有个小锅叫如果size相同保持原来的重儿子不变 我们需要写 ...
    
			
    8. 
						
  8. CentOS 7.4 系统安装 git
			
    CentOS 7.4 系统安装 git 一.使用 yum 安装 1.查看系统是否已经安装 git [root@localhost ~]# git --version 2.yum 安装 git [roo ...
    
			
    9. 
						
  9. JAVA 图形开发中组件对齐方法及界面开发
			
    /*文章中用到的代码只是一部分,需要源码的可通过邮箱联系我 1978702969@qq.com*/ 在上篇博客中提到了JAVA图形界面开发时的两种布局,流式布局和边框布局. 在实际使用中可能会发现,往 ...
    
			
    10. 
						
  10. rabbitmq学习（六） —— 主题
			
    主题交换(Topic exchange) 使用 topic 类型的交换器,不能有任意的绑定键,它必须是由点隔开的一系列的标识符组成.标识符可以是任何东西,但通常它们指定与消息相关联的一些功能.其中,有 ...
    
			
    11.