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程序设计有所帮助。
相关推荐
-
Angular实现较为复杂的表格过滤,删除功能示例
本文实例讲述了Angular实现较为复杂的表格过滤,删除功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>www.jb51.net Angular过滤.删除</title> <style> table{ border: 1px solid black; w
-
使用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:
-
AngularJS实现的根据数量与单价计算总价功能示例
本文实例讲述了AngularJS实现的根据数量与单价计算总价功能.分享给大家供大家参考,具体如下: 先看一下效果: 代码如下: <!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="UTF-8"> <title>www.jb51.net angular计算总价</title> <link rel="styles
-
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> <style> .box{ width: 100p
-
基于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 lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net Angular定时器</title> <script src="angular.min.js"></scrip
随机推荐
- C#操作字符串方法总结实例代码
- Java采用循环链表结构求解约瑟夫问题
- Java添加事件监听的四种方法代码实例
- EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
- Eclipse 开发java 出现Failed to create the Java Virtual Machine错误解决办法
- 在线引用最新jquery文件的实现方法
- jquery基础知识第一讲之认识jquery
- 深入理解js promise chain
- 完美清除局域网中ARP病毒的软件
- php获取twitter最新消息的方法
- 深入php var_dump()函数的详解
- LayoutAnimation给ListView中的item设置动态出场效果(实例)
- C#基础语法:Base关键字学习笔记
- Angular中使用MathJax遇到的一些问题
- 掌握PHP垃圾回收机制详解
- java语言求解兔子问题代码分析
- SpringCloud实战之Zuul网关服务
- Pytorch卷积层手动初始化权值的实例
- webpack热模块替换(HMR)/热更新的方法
- SpringBoot使用SOFA-Lookout监控的方法