注意,在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. HTML-HTML5+CSS3权威指南阅读(一、HTML5与HTML4之间的区别)

    一.HTML5与HTML4之间的区别 1. DOCTYPE 声明 1). HTML4 中为 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

  2. jquery删除一个元素,但保留里面的元素

    删除元素/内容 如需删除元素和内容,一般可使用以下两个 jQuery 方法: remove() - 删除被选元素(及其子元素) empty() - 从被选元素中删除子元素 但是如果我想删除这个元素,但 ...

  3. 解决Janusgraph索引状态不变更的问题

    JanusGraph的索引因为要同步不同实例及不同后端的数据,因此不是实时能够完成的,视配置,网络和数据量不同,建立/生效索引通常需要一段时间,这也是为什么创建索引时会创建wait()的原因. 在实践 ...

  4. 消息队列 概念 配合SpringBoot使用Demo

    转http://www.jianshu.com/p/048e954dab40 概念: 分布式消息队列 ‘分布式消息队列’包含两个概念 一是‘消息队列’,二是‘分布式’ 那么就先看下消息队列的概念,和为 ...

  5. 纯CSS3实现一个旋转的3D立方体盒子

    简单介绍 上网易前端微专业课程,里面有一个课外作业是实现一个3D旋转立方体.花了点时间做了下.还有点意思.写个简单教程.供大家学习. 先放上终于要实现的效果 注:代码在chrome 43.0.2357 ...

  6. Atitit.jquery 版本新特性attilax总结

    Atitit.jquery 版本新特性attilax总结 1. Jq1.4 1 2. 1.5 1 3. 1.6 3 4. Jq1.7 3 ⒉提升了事件委派时的性能有了大幅度的提升,尤其是在ie7下: ...

  7. js获取网页宽高

    <script> function getInfo() { var s = ""; s += " 网页可见区域宽:"+ document.body. ...

  8. 本地测试Tomcat配置Https访问

    一.tomcat开启HTTPS配置 1) 准备证书 使用jdk工具keytool生成一个ssl测试用证书, 一路按照提示操作输入即可 keytool -genkey -alias tomcat -ke ...

  9. CSRF学习笔记之CSRF的攻击与防御以及审计【00x2 】

    Medium完整代码: <?php if (isset($_GET['Change'])) { // Checks the http referer header if ( eregi ( &q ...

  10. jQuery 实战读书笔记之第六章:事件本质

    理解浏览器事件模型 understandEventModel.html 代码: <!DOCTYPE HTML> <html> <head> <title> ...