AngularJS 中ng-model通过$watch动态取值
这个例子的意思是，当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>
AngularJS 中ng-model通过$watch动态取值的更多相关文章
- Vue 列动态取值
在前端开发过程中,可能会遇到列动态取值的情况,即列表中某列的取值由两个或以上的字段的值决定. 用 Vue 实现的话可以用如下代码解决 <template slot-scope="sco ...
- springMVC 返回类型选择 以及 SpringMVC中model,modelMap.request,session取值顺序
springMVC 返回类型选择 以及 SpringMVC中model,modelMap.request,session取值顺序 http://www.360doc.com/content/14/03 ...
- 关于模板中的动态取值 ---反射与javascript脚本编译
在项目中经常遇到一个问题,打印word或者打印excel的时候,我们经常使用一对一的赋值或者批量替换的方式来对模板进行修改. 但是现在遇到两种场景: 1.取值是通过自定以方法进行取值的. 如:一个销售 ...
- 使用mybatis如果类属性名和数据库中的属性名不一样取值就会为null
使用mybatis时如果类属性名和数据库中的属性名不一样取值就会为null 这是不能再去改变javabean中的属性,只能改变sql语句.语句如下所示: <select id="sel ...
- AngularJS中实现Model缓存
在AngularJS中如何实现一个Model的缓存呢? 可以通过在Provider中返回一个构造函数,并在构造函数中设计一个缓存字段,在本篇末尾将引出这种做法. 一般来说,Model要赋值给Scope ...
- spring学习之springMVC 返回类型选择 以及 SpringMVC中model,modelMap.request,session取值顺序
spring mvc处理方法支持如下的返回方式:ModelAndView, Model, ModelMap, Map,View, String, void.下面将对具体的一一进行说明: ModelAn ...
- Salesforce中所有常用类型字段的取值与赋值
Salesforce中所有常用字段类型的定义以及如何用代码进行取值和赋值: Field Type的定义: http://www.salesforce.com/us/developer/docs/api ...
- springMVC中利用model在JSTL进行回填值
1.ringMVC中利用model回填值 后台中,利用model返回值,如 model.addAttribute("MS_info" , MS_info); 前台回填值: text ...
- angularjs中只显示选中的radio的值
angularjs中,只显示选中的radio的值.主要是相同的radio,name属性值要相同还有ng-model的值要相同,同时要指定value值.这样选中的时候就会在下面的div中显示选中的值了. ...
- spring中PropertyPlaceholderConfigurer的运用---使用${property-name}取值
代码如下: 配置文件: jdbc.properties的代码如下: jdbc.driverClassName=org.hsqldb.jdbcDriver jdbc.url=jdbc:hsqldb:hs ...
随机推荐
- getopt两个模块getopt 和gun_getopt 的异同
getopt的两个模块getopt和gun_getopt都可以接收参数,但是又有不同; 先看 getopt.getopt这个模块: import sys import getopt def main( ...
- 500 Internal Server Error
解决策略: 1.httpd.conf中,开启apache头信息自定义模块 2.htaccess文件,对这个域名的资源进行访问时,添加一个头信息 Header set Access-Control-Al ...
- [GO]切片和底层数组的关系
package main import "fmt" func main() { a := [], , , , , , , , , } s1 := a[:] s1[] = fmt.P ...
- C++语法知识小结（持续更新中）
1)在适用构造函数创建对象时,有时会创建临时对象.如 Stock::Stock(const std::string & co,long n,double pr); 在使用时,下面两条语句有根本 ...
- RegExp正则表达式对象
JavaScript的RegExp对象有两种创建方式,一种是字面量,一种是对象. var r = /pattern/attributes或者new RegExp(pattern, attributes ...
- Live 直播过程
采集.处理.编码.封包.推流.传输.转码.分发.拉流.解码.播放,从推流到播放
- android android遇到的错误
android遇到的错误 一.eclipse运行.生成.打包APK报错: 原因1: jdk版本太低,升级jdk 原因2: tools选择: android sdk build-tools 大于等于2 ...
- ARKit入门
ARKit介绍 ARKit是iOS11引入的一个全新的框架,使用Visual Inertial Odometry(VIO,视觉惯性里程计)来精确跟踪现实世界中的真实场景.相比其它设备平台,ARKit中 ...
- 20165219 《Java程序设计》实验三（敏捷开发与XP实践）实验报告
20165219 <Java程序设计>实验三(敏捷开发与XP实践)实验报告 一.实验报告封面 课程:Java程序设计 班级:1652班 姓名:王彦博 学号:20165219 成绩: 指导教 ...
- Scrapy 增量式爬虫
Scrapy 增量式爬虫 https://blog.csdn.net/mygodit/article/details/83931009 https://blog.csdn.net/mygodit/ar ...