这个例子的意思是，当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. java类中final方法的作用

    不给子类复写这个方法.说明你已经知道这个方法提供的功能已经满足你要求,不需要进行扩展,并且也不允许任何从此类继承的类来覆写这个方法,但是继承仍然可以继承这个方法,也就是说可以直接使用 inline扩展 ...

  2. Apache htpasswd命令

    一.简介 htpasswd是apache的一个工具,该工具主要用于建立和更新存储用户名.密码的文本文件,主要用于对基于http用户的认证. 二.语法 Usage: htpasswd [-cimBdps ...

  3. 6.AND & OR 运算符

    AND 和 OR 运算符用于基于一个以上的条件对记录进行过滤 AND 和 OR 运算符 AND 和 OR 可在 WHERE 子语句中把两个或多个条件结合起来. 如果第一个条件和第二个条件都成立,则 A ...

  4. 解决selenium与firefox版本不兼容问题

    Python环境下类比 个人使用 32位环境 Python 2.7.12 Selenium 2.53.6 Firefox 47.01 安装selenium可用pip选择对应版本,参考另一教程. 因为在 ...

  5. The Difference Between @Helpers and @Functions In WebMatrix

    from: http://www.mikesdotnetting.com/article/173/the-difference-between-helpers-and-functions-in-web ...

  6. eWebEditor9.x整合教程-Xproer.WordPaster

    版权所有 2009-2017 荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webplug/wordpa ...

  7. phpmyadmin安全预防

    头疼的安全 之前服务器总是本人黑,千疮百孔,只能一步步的去做一些安全防范,如何防范自然先从如何渗透开始. 文章及建议 前段时间看到了个phpmyadmin提权的教程,很多人都说现在那里还有root帐号 ...

  8. WEB缓存初探

    WEB缓存初探 概念理解 缓存--缓存就是数据交换的缓冲区(称作Cache) 缓存 的作用说白了就是用来就近获取东西,比如我们会把已经拿到的常用的东西放在手边(与自己相对较近的地方),方便下次需要时去 ...

  9. C# LINQ（2）

    前一章的代码LINQ都是以select结尾. 之前也说过可以group结尾. 那么怎么使用呢? 还是一样的条件,查询小于5大于0的元素 代码: ,,,,,,,,, }; var list = from ...

  10. Python第二周总结

    之所以晚发10天是因为中途发生了很多事情,让我比较懵,甚至都想放弃学Python,但自己选择的路,在艰难也得走下去,加油!!! 补充上期str后缀小魔法: 字符串一旦创建不得修改,一旦修改或拼接,就会 ...