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 相关文章推荐
childNodes.length与children.length的区别
May 14 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
jQuery搜索同辈元素方法
Feb 10 Javascript
浅谈js原生拖放
Nov 21 Javascript
浅析location.href跨窗口调用函数
Nov 22 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
PHP 实现一种多文件上传的方法
Sep 20 Javascript
利用node实现一个批量重命名文件的函数
Dec 21 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
Vue.js 中的实用工具方法【推荐】
Jul 04 Javascript
精读《Vue3.0 Function API》
May 20 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 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原生模板引擎 最简单的模板引擎
2012/04/25 PHP
关于PHP二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
header与缓冲区之间的深层次分析
2016/07/30 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
javascript radio 联动效果
2009/03/04 Javascript
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
JavaScript基础教程——入门必看篇
2016/05/20 Javascript
AngularJS 依赖注入详解和简单实例
2016/07/28 Javascript
vue.js获取数据库数据实例代码
2017/05/26 Javascript
js+html5实现页面可刷新的倒计时效果
2017/07/15 Javascript
详解js几个绕不开的事件兼容写法
2017/08/30 Javascript
jquery实现限制textarea输入字数的方法
2017/09/06 jQuery
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
对vux点击事件的优化详解
2018/08/28 Javascript
详解webpack模块加载器兼打包工具
2018/09/11 Javascript
处理JavaScript值为undefined的7个小技巧
2020/07/28 Javascript
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
[57:55]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第二场 12.12
2020/12/16 DOTA
Python 自动刷博客浏览量实例代码
2017/06/14 Python
解决pycharm py文件运行后停止按钮变成了灰色的问题
2018/11/29 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
django的ORM操作 增加和查询
2019/07/26 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
如何卸载python插件
2020/07/08 Python
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
英国门销售网站:Green Tree Doors
2020/01/07 全球购物
《一个中国孩子的呼声》教学反思
2014/02/12 职场文书
殡葬服务心得体会
2014/09/11 职场文书
普通员工辞职信范文
2015/05/12 职场文书
对学校的意见和建议
2015/06/04 职场文书
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript
如何使用pdb进行Python调试
2021/06/30 Python