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异或加解密效果代码
Jun 25 Javascript
[Web]防止用户复制页面内容和另存页面的方法
Feb 06 Javascript
jQuery之日期选择器的深入解析
Jun 19 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
Dec 12 Javascript
js实现兼容IE和FF的上下层的移动
May 04 Javascript
js实现的二级横向菜单条实例
Aug 22 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
Dec 07 Javascript
angularjs实现多张图片上传并预览功能
Feb 24 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
vue中的v-if和v-show的区别详解
Sep 01 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
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
解析php防止form重复提交的方法
2013/07/01 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
IE8 下的Js错误HTML Parsing Error...
2009/08/14 Javascript
JavaScript关于select的相关操作说明
2010/01/13 Javascript
js/html光标定位的实现代码
2013/09/23 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
jquery获取checkbox的值并post提交
2015/01/14 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
2017/06/13 Javascript
jquery easyui如何实现格式化列
2017/07/30 jQuery
jQuery表单选择器用法详解
2019/08/22 jQuery
vue+moment实现倒计时效果
2019/08/26 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
使用JavaScript计算前一天和后一天的思路详解
2019/12/20 Javascript
python uuid模块使用实例
2015/04/08 Python
python删除过期文件的方法
2015/05/29 Python
详解Numpy中的广播原则/机制
2018/09/20 Python
python的pytest框架之命令行参数详解(上)
2019/06/27 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
HTML5拖放API实现拖放排序的实例代码
2017/05/11 HTML / CSS
印度尼西亚电子产品购物网站:Kliknklik
2018/06/05 全球购物
电影T恤、80年代T恤和80年代服装:TV Store Online
2020/01/05 全球购物
师范大学音乐表演专业求职信
2013/10/23 职场文书
施工材料员岗位职责
2014/02/12 职场文书
人事局接收函
2015/01/30 职场文书
八月一日观后感
2015/06/10 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
关于拾金不昧的感谢信(五篇)
2019/10/18 职场文书
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android