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 相关文章推荐
javascript getElementsByClassName实现代码
Oct 11 Javascript
jquery ajax 调用失败的原因示例介绍
Sep 27 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
JS获取时间的方法
Jan 21 Javascript
Underscore源码分析
Dec 30 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
Jul 14 Javascript
JavaScript仿聊天室聊天记录
Dec 27 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
Jan 22 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
微信小程序实现自动定位功能
Oct 31 Javascript
OpenLayers加载缩放控件使用方法详解
Sep 25 Javascript
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 禁止页面缓存输出
2009/01/07 PHP
php 在文件指定行插入数据的代码
2010/05/08 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
php生成无限栏目树
2017/03/16 PHP
laravel实现批量更新多条记录的方法示例
2017/10/22 PHP
在laravel中实现将查询的对象转换为多维数组的函数
2019/10/21 PHP
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
javascript如何操作HTML下拉列表标签
2015/08/20 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
VueJS事件处理器v-on的使用方法
2017/09/27 Javascript
node中间层实现文件上传功能
2018/06/11 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
JavaScript变速动画函数封装添加任意多个属性
2019/04/03 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
详细分析JavaScript中的深浅拷贝
2020/09/17 Javascript
微信小程序实现左滑删除效果
2020/11/18 Javascript
Python中自定义函数的教程
2015/04/27 Python
numpy自动生成数组详解
2017/12/15 Python
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
使用Python将Exception异常错误堆栈信息写入日志文件
2020/04/08 Python
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
公务员职业生涯规划书范文  
2014/01/19 职场文书
小学数学国培感言
2014/03/10 职场文书
关于祖国的演讲稿
2014/05/04 职场文书
关于运动会的广播稿
2014/09/22 职场文书
幼儿园感恩节活动方案
2014/10/06 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
大学生党员个人总结
2015/02/13 职场文书
汶川大地震感悟
2015/08/10 职场文书
Vue Element-ui表单校验规则实现
2021/07/09 Vue.js