angular_文本变化
注意,在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_文本变化的更多相关文章
- Android之EditText文本变化的监听
监听EditText的文本变化需要给EditText控件加一个addTextChangeListener监听器 editText.addTextChangeListener(textWatcher); ...
- Android简易实战教程--第十九话《手把手教您监听EditText文本变化,实现抖动和震动的效果》
昨晚写博客太仓促,代码结构有问题,早上测试发现没法监听文本变化!今日更改一下.真心见谅啦,哈哈!主活动的代码已经改好了,看截图这次的确实现了文本监听变化情况. 监听文本输入情况,仅仅限于土司略显low ...
- 【jQuery】input textarea 文本变化的动态监听
实时监听Input textarea文本变化的监听事件:[但不包含通过js动态添加改变的文本事件] HTML: <textarea style="display: none" ...
- 深入理解DOM事件类型系列第五篇——文本事件
× 目录 [1]change [2]textInput [3]input[4]propertychange[5]兼容 前面的话 如果DOM结构发生变化,触发的是变动事件:如果文本框中的文本发生变化,触 ...
- [深入浅出WP8.1(Runtime)]文本框(TextBox)
4.4 文本框(TextBox) 文本框(TextBox)控件是表示一个可用于显示和编辑单格式.多行文本的控件.TextBox控件常用于在表单中编辑非格式化文本,例如,如果一个表单要求输入用户姓名.电 ...
- React Native 文本输入
TextInput是一个允许用户输入文本的基础组件.它有一个名为onChangeText的属性,此属性接受一个函数,而此函数会在文本变化时被调用.另外还有一个名为onSubmitEditing的属性, ...
- 使用TextWatcher监听EditText变化
public class MainActivity extends AppCompatActivity { private TextView mTextView; private EditText m ...
- 关于iOS中的文本操作-管理text fields 和 text views
Managing Text Fields and Text Views 管理UITextField和UITextView实例 UITextField和UITextView的实例拥有两个最主要的功能:展 ...
- TextView使用Spannable设置复合文本
http://blog.csdn.net/linghu_java/article/details/32053167 Spannable 对文字的编辑减少TextView的拼接并且达到改变一串字符中的部 ...
随机推荐
- HTML-HTML5+CSS3权威指南阅读(一、HTML5与HTML4之间的区别)
一.HTML5与HTML4之间的区别 1. DOCTYPE 声明 1). HTML4 中为 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...
- jquery删除一个元素,但保留里面的元素
删除元素/内容 如需删除元素和内容,一般可使用以下两个 jQuery 方法: remove() - 删除被选元素(及其子元素) empty() - 从被选元素中删除子元素 但是如果我想删除这个元素,但 ...
- 解决Janusgraph索引状态不变更的问题
JanusGraph的索引因为要同步不同实例及不同后端的数据,因此不是实时能够完成的,视配置,网络和数据量不同,建立/生效索引通常需要一段时间,这也是为什么创建索引时会创建wait()的原因. 在实践 ...
- 消息队列 概念 配合SpringBoot使用Demo
转http://www.jianshu.com/p/048e954dab40 概念: 分布式消息队列 ‘分布式消息队列’包含两个概念 一是‘消息队列’,二是‘分布式’ 那么就先看下消息队列的概念,和为 ...
- 纯CSS3实现一个旋转的3D立方体盒子
简单介绍 上网易前端微专业课程,里面有一个课外作业是实现一个3D旋转立方体.花了点时间做了下.还有点意思.写个简单教程.供大家学习. 先放上终于要实现的效果 注:代码在chrome 43.0.2357 ...
- Atitit.jquery 版本新特性attilax总结
Atitit.jquery 版本新特性attilax总结 1. Jq1.4 1 2. 1.5 1 3. 1.6 3 4. Jq1.7 3 ⒉提升了事件委派时的性能有了大幅度的提升,尤其是在ie7下: ...
- js获取网页宽高
<script> function getInfo() { var s = ""; s += " 网页可见区域宽:"+ document.body. ...
- 本地测试Tomcat配置Https访问
一.tomcat开启HTTPS配置 1) 准备证书 使用jdk工具keytool生成一个ssl测试用证书, 一路按照提示操作输入即可 keytool -genkey -alias tomcat -ke ...
- CSRF学习笔记之CSRF的攻击与防御以及审计【00x2 】
Medium完整代码: <?php if (isset($_GET['Change'])) { // Checks the http referer header if ( eregi ( &q ...
- jQuery 实战读书笔记之第六章:事件本质
理解浏览器事件模型 understandEventModel.html 代码: <!DOCTYPE HTML> <html> <head> <title> ...