Angular实现的敏感文字自动过滤与提示功能示例
本文实例讲述了Angular实现的敏感文字自动过滤与提示功能。分享给大家供大家参考,具体如下:
先来看看运行效果:

具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.jb51.net angular敏感文字自动过滤</title>
<script src="angular.min.js"></script>
<script>
var myapp=angular.module("myapp",[]);
myapp.filter("filter1",function () {
return function (msg,flag) {
return msg.replace(/三鹿/g,flag);
}
});
myapp.controller("myCtrl",function ($scope) {
$scope.message=""
});
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<input type="text" ng-model="message">
<div>{{message|filter1:"输入违禁词了"}}</div>
</body>
</html>
更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
相关推荐
-
AngularJS实现的根据数量与单价计算总价功能示例
本文实例讲述了AngularJS实现的根据数量与单价计算总价功能.分享给大家供大家参考,具体如下: 先看一下效果: 代码如下: <!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="UTF-8"> <title>www.jb51.net angular计算总价</title> <link rel="styles
-
基于AngularJS的拖拽文件上传的实例代码
随着HTML5的普及,现在大部分浏览器都支持拖拽功能,今天我们要说的就是实现一套拖拽上传的功能(Angularjs+nodejs). 一.首先前端这款插件是基于AngularJS的,下面我们来看主要代码. 引入js: <script src="js/angular.1.3.15.min.js"></script> <script src="js/ng-file-upload-shim.min.js"></script>
-
angular-ui-sortable实现可拖拽排序列表
项目需求,添加列表可拖拽排序功能,谷歌了一下,找到一个Angular的插件:angular-ui-sortable,项目地址:https://github.com/angular-ui/ui-sortable 需要在之前引入jquery,和jquery-ui,否则无法使用. 我们要做的事情,加载数据,拖拽排序并输出当前顺序: js代码: <script src="../../jquery.js"></script> <script src="..
-
使用angular帮你实现拖拽的示例
拖拽有多种写法,在这里就看一看angular版的拖拽. <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ width: 100px; height: 100px; background:
-
Angular实现点击按钮控制隐藏和显示功能示例
本文实例讲述了Angular实现点击按钮控制隐藏和显示功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net Angular显示隐藏</title> <style> .box{ width: 100p
-
Angular实现较为复杂的表格过滤,删除功能示例
本文实例讲述了Angular实现较为复杂的表格过滤,删除功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>www.jb51.net Angular过滤.删除</title> <style> table{ border: 1px solid black; w
-
AngularJS实现的锚点楼层跳转功能示例
本文实例讲述了AngularJS实现的锚点楼层跳转功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>anchor</title> <style> #wei div{ width:100%; height:720px; background: re
-
AngularJS实现的简单拖拽功能示例
本文实例讲述了AngularJS实现的简单拖拽功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>www.jb51.net AngularJS拖拽</title> <style> *{ padding:0; margin:0; } .wei{ wi
-
Angular实现的日程表功能【可添加及隐藏显示内容】
本文实例讲述了Angular实现的日程表功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net Angular日程表</title> <style> table{ border-collapse: c
-
Angular实现的简单定时器功能示例
本文实例讲述了Angular实现的简单定时器功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net Angular定时器</title> <script src="angular.min.js"></scrip
随机推荐
- 使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
- 比较Ajax的三种实现及JSON解析
- JDBC 入门(二)
- Centos7.1防火墙开放端口快速方法
- IOS网络请求之NSURLSession使用详解
- python爬虫headers设置后无效的解决方法
- 《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
- PHP链接MySQL的常用扩展函数
- 详解Android中Notification的使用方法
- MySQL中查询的有关英文字母大小写问题的分析
- Access转成SQL数据库的方法
- Sql Server使用cursor处理重复数据过程详解
- JQuery文本改变触发事件如聚焦事件、失焦事件
- 实例解析jQuery插件EasyUI最常用的表单验证规则
- jquery选择器之基本过滤选择器详解
- Jquery命名冲突解决的五种方案分享
- JavaScript编码风格指南(中文版)
- Java中Date和Calendar常用方法
- Android开发笔记之:深入理解多线程AsyncTask
- 尾递归详细总结分析
