这个例子的意思是，当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动态取值的更多相关文章

  1. Vue 列动态取值

    在前端开发过程中,可能会遇到列动态取值的情况,即列表中某列的取值由两个或以上的字段的值决定. 用 Vue 实现的话可以用如下代码解决 <template slot-scope="sco ...

  2. springMVC 返回类型选择 以及 SpringMVC中model,modelMap.request,session取值顺序

    springMVC 返回类型选择 以及 SpringMVC中model,modelMap.request,session取值顺序 http://www.360doc.com/content/14/03 ...

  3. 关于模板中的动态取值 ---反射与javascript脚本编译

    在项目中经常遇到一个问题,打印word或者打印excel的时候,我们经常使用一对一的赋值或者批量替换的方式来对模板进行修改. 但是现在遇到两种场景: 1.取值是通过自定以方法进行取值的. 如:一个销售 ...

  4. 使用mybatis如果类属性名和数据库中的属性名不一样取值就会为null

    使用mybatis时如果类属性名和数据库中的属性名不一样取值就会为null 这是不能再去改变javabean中的属性,只能改变sql语句.语句如下所示: <select id="sel ...

  5. AngularJS中实现Model缓存

    在AngularJS中如何实现一个Model的缓存呢? 可以通过在Provider中返回一个构造函数,并在构造函数中设计一个缓存字段,在本篇末尾将引出这种做法. 一般来说,Model要赋值给Scope ...

  6. spring学习之springMVC 返回类型选择 以及 SpringMVC中model,modelMap.request,session取值顺序

    spring mvc处理方法支持如下的返回方式:ModelAndView, Model, ModelMap, Map,View, String, void.下面将对具体的一一进行说明: ModelAn ...

  7. Salesforce中所有常用类型字段的取值与赋值

    Salesforce中所有常用字段类型的定义以及如何用代码进行取值和赋值: Field Type的定义: http://www.salesforce.com/us/developer/docs/api ...

  8. springMVC中利用model在JSTL进行回填值

    1.ringMVC中利用model回填值 后台中,利用model返回值,如 model.addAttribute("MS_info" , MS_info); 前台回填值: text ...

  9. angularjs中只显示选中的radio的值

    angularjs中,只显示选中的radio的值.主要是相同的radio,name属性值要相同还有ng-model的值要相同,同时要指定value值.这样选中的时候就会在下面的div中显示选中的值了. ...

  10. spring中PropertyPlaceholderConfigurer的运用---使用${property-name}取值

    代码如下: 配置文件: jdbc.properties的代码如下: jdbc.driverClassName=org.hsqldb.jdbcDriver jdbc.url=jdbc:hsqldb:hs ...

随机推荐

  1. Win7怎么进入安全模式 三种轻松进入Win7安全模式方法

    发布时间:2013-05-27 11:23 作者:电脑百事网原创 来源:www.pc841.com 13783次阅读 win7的安全模式和XP如出一辙,在安全模式里我们可以删除顽固文件.查杀病毒.解除 ...

  2. Jmeter接口测试-新用户注册API

    新用户注册 新用户注册的接口是POST /register username/password/password_confirmation 该接口需要提供3个参数,分别是 username 用户名 p ...

  3. Dennis Gabor与全息摄影

    Dennis Gabor:1900年6月5日出生在匈牙利首都布达佩斯,1971年诺贝尔物理学奖授予英国伦敦帝国科技学院的匈牙利裔物理学家伽博(Dennis Gabor,1900-1979),以表彰他发 ...

  4. Schwartz kernel theorem施瓦兹核定理

    In mathematics, the Schwartz kernel theorem is a foundational result in the theory of generalized fu ...

  5. Hadoop安装所遇问题及解决方法

    1.错误:java.io.IOException: File /hadoop/hadooptmp/mapred/system/jobtracker.info could only be replica ...

  6. 编写高质量代码改善C#程序的157个建议——建议50：在Dispose模式中应区别对待托管资源和非托管资源

    建议50:在Dispose模式中应区别对待托管资源和非托管资源 真正资源释放代码的那个虚方法是带一个bool参数的,带这个参数,是因为我们在资源释放时要区别对待托管资源和非托管资源. 提供给调用者调用 ...

  7. 替归算法获取Treeview所有节点

    treeview.nodes是获取下一级所有子节点,但是如果是多层的话,就不能,想个法子来获取所有的节点(含节点的子节点),想了想 还是替归算法比较方便,如是有了下面的代码 public static ...

  8. C# 读取Text文本，写入Text文本

    //读取 private void showMess() { this.dataGridViewX2.Rows.Clear(); //将车辆信息一行行添加到datagreatview 里面 Strea ...

  9. 死磕Java之聊聊ArrayList源码(基于JDK1.8)

    工作快一年了,近期打算研究一下JDK的源码,也就因此有了死磕java系列 ArrayList 是一个数组队列,相当于动态数组.与Java中的数组相比,它的容量能动态增长.它继承于AbstractLis ...

  10. linux虚拟机安装mysql(Mysql-5.7.10)

    注:MySQL5.5版本开始弃用了常规的configure编译方法,通过cmake来编译.需要下载安装cmake编译器.boost库.ncurses库.GNU分析器生成器bison 1. 安装基础环境 ...