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实现浏览器的各种菜单命令比如打印、查看源文件等等
Oct 24 Javascript
jquery中的过滤操作详细解析
Dec 02 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 Javascript
jQuery如何使用自动触发事件trigger
Nov 29 Javascript
JavaScript学习笔记之数组去重
Mar 23 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
Aug 31 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
手机注册发送验证码倒计时的简单实例
Nov 15 Javascript
Seajs源码详解分析
Apr 02 Javascript
详解vue开发中调用微信jssdk的问题
Apr 16 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 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
全国中波电台频率表
2020/03/11 无线电
Symfony查询方法实例小结
2017/06/28 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
模拟用户操作Input元素,不会触发相应事件
2007/05/11 Javascript
jquery之empty()与remove()区别说明
2010/09/10 Javascript
初学js插入节点appendChild insertBefore使用方法
2011/07/04 Javascript
yepnope.js 异步加载资源文件
2011/09/08 Javascript
js数组方法扩展实现数组统计函数
2014/04/09 Javascript
JavaScript中的Math 使用介绍
2014/04/21 Javascript
详解Bootstrap四种图片样式
2016/01/04 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
2016/08/29 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
JavaScript中的遍历详解(多种遍历)
2017/04/07 Javascript
理解javascript async的用法
2017/08/22 Javascript
hammer.js实现图片手势放大效果
2017/08/29 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
bootstrap table合并行数据并居中对齐效果
2018/10/17 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
2019/04/30 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
layer关闭当前窗口页面以及确认取消按钮的方法
2019/09/09 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
python在linux中输出带颜色的文字的方法
2014/06/19 Python
Python随机数random模块使用指南
2016/09/09 Python
Python如何快速实现分布式任务
2017/07/06 Python
Python绘制七段数码管实例代码
2017/12/20 Python
python简单实现操作Mysql数据库
2018/01/29 Python
Python调用C++,通过Pybind11制作Python接口
2018/10/16 Python
求职意向书范文
2014/04/01 职场文书
优秀应届生求职信
2014/06/16 职场文书
公司离职证明标准范本
2014/10/05 职场文书
教师党员个人整改措施
2014/10/27 职场文书
2015年打非治违工作总结
2015/04/02 职场文书
2015年药店工作总结
2015/04/20 职场文书
红楼梦读书笔记
2015/06/25 职场文书
新手入门Mysql--sql执行过程
2021/06/20 MySQL
Pygame Rect区域位置的使用(图文)
2021/11/17 Python