AngularJS实现的自定义过滤器简单示例


Posted in Javascript onFebruary 02, 2019

本文实例讲述了AngularJS实现的自定义过滤器。分享给大家供大家参考,具体如下:

1.自定义限制字数的过滤器

啥也不说了直接上代码吧

angular.module('demo').filter('cut', function($sce) {
return function(value, wordwise, max, tail) {
if (!value) return '';
max = parseInt(max, 10);
if (!max) return value;
if (value.length <= max) return value;
if(value.length > max){
  value = value.substr(0, max);
}
if (wordwise) {
  var lastspace = value.lastIndexOf(' ');
  if (lastspace != -1) {
  value = value.substr(0, lastspace);
  }
}
return $sce.trustAsHtml(value + (tail || ' … <span>显示全文</span>'));
};
});

代码直接拷走绝对没问题!!项目亲测!

2.自定义其他过滤器

还是直接上代码

angular.module('demo').filter('stateFormat', ['state', function (state) {
  return function(input, type){
    if(type == 'stateColor'){
      switch (input){
        case '1': return 'green';break;
        case '0': return 'red';break;
      }
    } else if(type == 'stateText'){
      switch (input){
        case '1': return '特价';break;
        case '0': return '未特价';break;
      }
    } else if(type == 'marry'){
      switch (input){
        case '1': return '黄焖鸡米饭';break;
        case '2': return '水煮肉片';break;
        case '3': return '酸菜鱼';break;
      }
    } else(type == 'propertyColor'){
      switch (input){
        case '1': return 'blue';break;
        case '-1': return 'red';break;
        case '0': return ''; break;
      }
    }

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
jQuery Select(单选) 模拟插件 V1.3.62 改进版
Jul 17 Javascript
jquery判断密码强度的验证代码
Apr 22 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 Javascript
利用JS实现数字增长
Jul 28 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
JS中with的替代方法与String中的正则方法详解
Dec 23 Javascript
从零学习node.js之利用express搭建简易论坛(七)
Feb 25 Javascript
微信小程序实现多选功能
Nov 04 Javascript
JS实现的A*寻路算法详解
Dec 14 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 Javascript
浅谈关于vue中scss公用的解决方案
Dec 02 Javascript
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
vue实现的树形结构加多选框示例
Feb 02 #Javascript
javascript中floor使用方法总结
Feb 02 #Javascript
JS对象和字符串之间互换操作实例分析
Feb 02 #Javascript
Vue+Element UI+Lumen实现通用表格分页功能
Feb 02 #Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 #Javascript
JS使用canvas中的measureText方法测量字体宽度示例
Feb 02 #Javascript
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 #Javascript
You might like
提升PHP执行速度全攻略(上)
2006/10/09 PHP
PHP中使用php5-ffmpeg撷取视频图片实例
2015/01/07 PHP
PHP文件上传类实例详解
2016/04/08 PHP
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
Jquery 的扩展方法总结
2011/10/01 Javascript
使用Node.js配合Nginx实现高负载网络
2015/06/28 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
2015/11/06 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
jQuery获取this当前对象子元素对象的方法
2016/11/29 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
获取url中用&amp;隔开的参数实例(分享)
2017/05/28 Javascript
Angular2 自定义validators的实现方法
2017/07/05 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
2017/12/23 Javascript
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
vue路由前进后退动画效果的实现代码
2018/12/10 Javascript
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
在Python的Django框架中加载模版的方法
2015/07/16 Python
Python实现简单遗传算法(SGA)
2018/01/29 Python
Django 登陆验证码和中间件的实现
2018/08/17 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
狼和鹿教学反思
2014/02/05 职场文书
社区食品安全实施方案
2014/03/28 职场文书
个人承诺书怎么写
2014/05/24 职场文书
教师党员群众路线教育实践活动心得体会
2014/11/04 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
高校教师个人总结
2015/02/10 职场文书
党支部审查意见
2015/06/02 职场文书