AngularJS 中ng-model通过$watch动态取值
2024-09-01 05:49:11
这个例子的意思是,当xxxx的长度不超过6时,xxxx和yyyy两个input的model是无关的,但当xxxx超过6,则yyyy会跟随其值而变化。
另一种做法是在input的ng-model后面添加ng-change关联一个函数,进行动态更新,也可以达到类似的效果。
这两种做法本质上都没有改变ng-model指向的对象,但是能把另一个model的变化反映到自己身上来。
<!doctype HTML>
<html> <head lang="en">
<meta charset="utf-8"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('app', []);
app.controller('AppCtrl', function($scope) { $scope.xxxx = "apple";
$scope.yyyy = "banana"; $scope.$watch('xxxx', function() { if ($scope.xxxx.length > 6) {
$scope.yyyy = "***" + $scope.xxxx + "***";
} else {}
});
});
</script> </head> <body ng-app="app" ng-controller="AppCtrl"> <input type="text" ng-model="xxxx">
<input type="text" ng-model="yyyy"> <br/>
<p>{{xxxx}}</p>
<p>{{yyyy}}</p> </body> </html>
最新文章
- namesilo域名注册教程
- 【BZOJ】2697: 特技飞行
- 创建JOB
- WCF: 没有终结点在侦听可以接受消息的 这通常是由于不正确的地址或者 SOAP 操作导致的。
- Spring3系列10- Spring AOP——Pointcut,Advisor拦截指定方法
- RPC的学习 &; gprotobuf 和 thrift的比较
- Android loader 详解
- NetworkX学习笔记-5-NetworkX中怎样对多个网络赋属性,并根据属性排序
- eclipse3.1.1汉化版安装
- C语言 &#183; 区间K大数查询
- 项目经验分享——Java常用工具类集合 转
- The 2014 ACM-ICPC Asia Regional Anshan Online
- Spring MVC 关于分页的简单实现
- Groovy语言学习--语法基础(5)
- 【python小练】0004
- Sharepoint 2010 工作流状态值
- [c#基础]ICloneable接口
- Struts1的基础知识
- Working With JSON
- Codeforces Round #371 (Div. 1) D. Animals and Puzzle 二维倍增