注意，在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. asp.net生成视图时报错 未引用System.Runtime, Version...

    这是没有添加程序集引用 在程序集中添加一条引用 <compilation debug="true" targetFramework="4.5.1"> ...

  2. discuz开发笔记

    http://blog.csdn.net/tiangsu_php/article/details/7665125 http://www.discuz.net/thread-3225192-1-1.ht ...

  3. Request to https://bower.herokuapp.com failed with 502

    bower 版本过低,需要升级为最新bower版本, 如果升级版本后依然无法使用,更改.bowerrc配置,如下所示 { "directory": "bower_comp ...

  4. 【原创】k8s源代码分析-----kubelet（8）pod管理

    本文QQ空间链接:http://user.qzone.qq.com/29185807/blog/1460540474 本文csdn博客链接:http://blog.csdn.net/screscent ...

  5. 【转载】 使用rman进行坏块修复（ORA-01578、ORA-01110）

    [转自]http://blog.itpub.net/21256317/viewspace-1062055/ 使用rman进行坏块修复(ORA-01578.ORA-01110) 2012年的一天,处理的 ...

  6. atitit.破解 拦截 绕过 网站 手机 短信 验证码 之自动获取手机短信方式 attilax 总结

    atitit.破解  拦截 绕过 网站 手机 短信 验证码 之自动获取手机短信方式 attilax 总结 1. 自动获取手机短信方式的原理 1 2. 调用api 1 3. ----核心代码 2 4.  ...

  7. [svc][jk][mem]linux 内存清理/释放命令

    1.清理前内存使用情况 free -m 2.开始清理  echo 1 > /proc/sys/vm/drop_caches 3.清理后内存使用情况 free -m 4.完成! 查看内存条数命令: ...

  8. matplotlib 添加注释的方式

    matplotlib 添加注释的方式 matplotlib.pyplot.annotate Annotate the point xy with text s s : str The text of ...

  9. spring mvc中拦截器配置mvc:interceptors

    其实在mvc:interceptors标签中,有两种类型的配置,一种直接配置一个bean(bean和ref归为一类),另一种还要配置上拦截的路径和排除的路径.直接配置的bean那就代表对所有的请求进行 ...

  10. 关于selenium IDE找不到元素bug

    使用 selenium IDE 录制脚本,经常会发生 这样一种错误. 页面上,明明存在这个元素,就是找不到. 其实原理很简单   , 按钮 点击,没有时间延迟,但是页面加载,需要一段时间. 页面元素还 ...