注意，在input中用ng-change的时候，一定要结合着ng-model用

开头，注意在这里添加了ng-app

<!DOCTYPE html>

<html lang="zh-cn" ng-app>

。

。

。

。
        <!--ng-controller控制器-->

        <div ng-controller="changeCtrl">

            <label id="lbl" class="label label-info"></label>

            <input ng-model="msg" ng-change="changeFunc(msg)" type="text" class="form-control">

            <button ng-click="clickFunc()" class="btn btn-primary" type="button">submit</button>

        </div>

js：

            function changeCtrl($scope) {

                //alert();  //验证控制器是否加载

                //changeFunc是来自于$scope对象的一个属性

                $scope.changeFunc = function (msg) {//双向绑定了msg

//                    console.log(msg);

                    $("#lbl").html(msg);

                    //正则表达，当出现wanglijuan拼音的时候替换王立娟汉字

                    var reg = /wanglijuan/g;

                    $("#lbl").html(msg.replace(reg,"王立娟"));

                };

                $scope.clickFunc = function () {

                    $("h1").html($("#lbl").html());

                }

            }

完整练习，在GitHub：

https://github.com/besswang

angular_文本变化的更多相关文章

  1. Android之EditText文本变化的监听

    监听EditText的文本变化需要给EditText控件加一个addTextChangeListener监听器 editText.addTextChangeListener(textWatcher); ...

  2. Android简易实战教程--第十九话《手把手教您监听EditText文本变化，实现抖动和震动的效果》

    昨晚写博客太仓促,代码结构有问题,早上测试发现没法监听文本变化!今日更改一下.真心见谅啦,哈哈!主活动的代码已经改好了,看截图这次的确实现了文本监听变化情况. 监听文本输入情况,仅仅限于土司略显low ...

  3. 【jQuery】input textarea 文本变化的动态监听

    实时监听Input textarea文本变化的监听事件:[但不包含通过js动态添加改变的文本事件] HTML: <textarea style="display: none" ...

  4. 深入理解DOM事件类型系列第五篇——文本事件

    × 目录 [1]change [2]textInput [3]input[4]propertychange[5]兼容 前面的话 如果DOM结构发生变化,触发的是变动事件:如果文本框中的文本发生变化,触 ...

  5. [深入浅出WP8.1(Runtime)]文本框（TextBox）

    4.4 文本框(TextBox) 文本框(TextBox)控件是表示一个可用于显示和编辑单格式.多行文本的控件.TextBox控件常用于在表单中编辑非格式化文本,例如,如果一个表单要求输入用户姓名.电 ...

  6. React Native 文本输入

    TextInput是一个允许用户输入文本的基础组件.它有一个名为onChangeText的属性,此属性接受一个函数,而此函数会在文本变化时被调用.另外还有一个名为onSubmitEditing的属性, ...

  7. 使用TextWatcher监听EditText变化

    public class MainActivity extends AppCompatActivity { private TextView mTextView; private EditText m ...

  8. 关于iOS中的文本操作-管理text fields 和 text views

    Managing Text Fields and Text Views 管理UITextField和UITextView实例 UITextField和UITextView的实例拥有两个最主要的功能:展 ...

  9. TextView使用Spannable设置复合文本

    http://blog.csdn.net/linghu_java/article/details/32053167 Spannable 对文字的编辑减少TextView的拼接并且达到改变一串字符中的部 ...

随机推荐

  1. java基础讲解09-----接口，继承，多态

    还有什么包装类,数字类,这些简单的我就不想过去介绍,前面也大概的介绍了下,继承,多态 1.类的继承 继承的思想:基于某个父类的扩展,制定一个新的子类.子类可以继承父类原有的属性,方法,也可以重写父类的 ...

  2. ADB 高级应用

    一.利用无线来查看adb shell > adb tcpip 5555   连接: > adb connect IP:5555   见后文<调试注意事项>   二.模拟按键   ...

  3. &lt;&lt;Python基础教程&gt;&gt;学习笔记 | 第11章 | 文件和素材

    打开文件 open(name[mode[,buffing]) name: 是强制选项,模式和缓冲是可选的 #假设文件不在.会报以下错误: >>> f = open(r'D:\text ...

  4. 任务调度Cron表达式及Quartz代码详解

    在线Cron表达式生成器 http://cron.qqe2.com/ cron表达式详解 http://www.cnblogs.com/linjiqin/archive/2013/07/08/3178 ...

  5. 自己定义滑动删除item的ListView。

    首先继承创建继承ListView和实现OnTouchListener,OnGestureListener的类. 会使用到AbsList中的pointToPosition(int x, int y)方法 ...

  6. 自定义闹钟 Reminder

    Reminder reminder = ScheduledActionService.Find("MY REMINDER") as Reminder; if ( reminder ...

  7. 关于Tensorflow 的数据读取环节

    Tensorflow读取数据的一般方式有下面3种: preloaded直接创建变量:在tensorflow定义图的过程中,创建常量或变量来存储数据 feed:在运行程序时,通过feed_dict传入数 ...

  8. spring boot +mybatis+druid 多数据源配置

    因为我的工程需要在两个数据库中操作数据,所以要配置两个数据库,我这里没有数据源没有什么主从之分,只是配合多数据源必须要指定一个主数据源,所以我就把 操作相对要对的那个数据库设置为主数据(dataBas ...

  9. Linux中如何设置服务自启动？

    转自:Linux中如何设置服务自启动? 有时候我们需要Linux系统在开机的时候自动加载某些脚本或系统服务,主要用三种方式进行这一操作: ln -s             在/etc/rc.d/rc ...

  10. flex and bison学习笔记01

    工作需要,学习一下Flex and bison,以前在编译原理的课上听老师说过他们的前辈,lex and yacc.Flex and bison就是lex and yacc的升级版. 参考书:flex ...