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 深拷贝函数
Dec 04 Javascript
window.name代替cookie的实现代码
Nov 28 Javascript
jquery实现select选中行、列合计示例
Apr 25 Javascript
JS生成不重复随机数组的函数代码
Jun 10 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
jQuery图片切换动画特效
Nov 02 Javascript
关于不同页面之间实现参数传递的几种方式讨论
Feb 13 Javascript
详解angularjs利用ui-route异步加载组件
May 21 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
微信小程序三级联动选择器使用方法
May 19 Javascript
vue + axios get下载文件功能
Sep 25 Javascript
vue3使用vuedraggable实现拖拽功能
Apr 06 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
Ping服务的php实现方法,让网站快速被收录
2012/02/04 PHP
PHP中CURL的CURLOPT_POSTFIELDS参数使用细节
2014/03/17 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
javascript 一段左右两边随屏滚动的代码
2009/06/18 Javascript
JS trim去空格的最佳实践
2011/10/30 Javascript
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
浮动的div自适应居中显示的js代码
2013/12/23 Javascript
实用jquery操作表单元素的简单代码
2016/07/04 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
前端构建工具之gulp的配置与搭建详解
2017/06/12 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
Vue动态修改网页标题的方法及遇到问题
2019/06/09 Javascript
JavaScript中的ES6 Proxy的具体使用
2019/06/16 Javascript
Python读取图片EXIF信息类库介绍和使用实例
2014/07/10 Python
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
Python使用matplotlib实现基础绘图功能示例
2018/07/03 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
详解Python sys.argv使用方法
2019/05/10 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】
2019/10/24 Python
Python变量、数据类型、数据类型转换相关函数用法实例详解
2020/01/09 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
Python容器类型公共方法总结
2020/08/19 Python
python中的垃圾回收(GC)机制
2020/09/21 Python
副总经理工作职责
2013/11/28 职场文书
学生会主席事迹材料
2014/01/28 职场文书
公司年会策划方案
2014/05/17 职场文书
人力资源本科毕业生求职信
2014/06/04 职场文书
安全环保标语
2014/06/09 职场文书
小学生国庆节演讲稿
2014/09/05 职场文书
网络妈妈观后感
2015/06/08 职场文书
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android