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 相关文章推荐
JS关键字变色实现思路及代码
Feb 21 Javascript
jQuery实现HTML5 placeholder效果实例
Dec 09 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
Jan 27 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
vue2组件实现懒加载浅析
Mar 29 Javascript
基于对象合并功能的实现示例
Oct 10 Javascript
浅谈webpack打包之后的文件过大的解决方法
Mar 07 Javascript
vue左右侧联动滚动的实现代码
Jun 06 Javascript
jquery添加div实现消息聊天框
Feb 08 jQuery
如何封装Vue Element的table表格组件
Feb 06 Vue.js
详解JavaScript中Arguments对象用途
Aug 30 Javascript
如何用vue实现网页截图你知道吗
Nov 17 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
同时提取多条新闻中的文本一例
2006/10/09 PHP
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
微信支付如何实现内置浏览器的H5页面支付
2015/09/25 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
Node.js实现数据推送
2016/04/14 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
简单实现js悬浮导航效果
2017/02/05 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
2017/04/18 Javascript
详解vue嵌套路由-params传递参数
2017/05/23 Javascript
vue2组件之select2调用的示例代码
2017/10/12 Javascript
angular6的响应式表单的实现
2018/10/10 Javascript
微信小程序实现的canvas合成图片功能示例
2019/05/03 Javascript
js String.prototype.trim字符去前后空格的扩展
2020/08/23 Javascript
vue 获取元素额外生成的data-v-xxx操作
2020/09/09 Javascript
Python生成随机验证码的两种方法
2015/12/22 Python
Django与JS交互的示例代码
2017/08/23 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
Python使用pylab库实现绘制直方图功能示例
2018/06/01 Python
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
python搜索算法原理及实例讲解
2020/11/18 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
解析HTML5中的新功能本地存储localStorage
2016/03/01 HTML / CSS
阿迪达斯意大利在线商店:adidas意大利
2016/09/19 全球购物
《桃林那间小木屋》教学反思
2014/05/01 职场文书
保护黄河倡议书
2014/05/16 职场文书
竞选班干部演讲稿300字
2014/08/20 职场文书
庆七一晚会主持词
2015/06/30 职场文书
初中同学会致辞
2015/08/01 职场文书
《草船借箭》教学反思
2016/02/23 职场文书
2019银行竞聘书
2019/06/21 职场文书
Python中npy和mat文件的保存与读取
2022/04/24 Python
MySQL8.0 Undo Tablespace管理详解
2022/06/16 MySQL