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 相关文章推荐
经常用到的JavasScript事件的翻译
Apr 09 Javascript
JS常用字符串处理方法应用总结
May 22 Javascript
node.js中的fs.chownSync方法使用说明
Dec 16 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
Feb 23 Javascript
js如何判断输入字符串长度
Dec 16 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
Mar 21 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
理解JavaScript原型链
Oct 25 Javascript
JS实现的全排列组合算法示例
Oct 09 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
Jan 22 Javascript
vue+canvas实现拼图小游戏
Sep 18 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
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
深入file_get_contents与curl函数的详解
2013/06/25 PHP
关于jquery动态增减控件的一些想法和小插件
2010/08/01 Javascript
解决js正则匹配换行问题实现代码
2012/12/10 Javascript
中文输入法不触发onkeyup事件的解决办法
2014/07/09 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
2017/09/17 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
2019/08/15 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
JS实现简易日历效果
2021/01/25 Javascript
python3实现短网址和数字相互转换的方法
2015/04/28 Python
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
浅谈python中的实例方法、类方法和静态方法
2017/02/17 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
解决Python3下map函数的显示问题
2019/12/04 Python
python时间日期操作方法实例小结
2020/02/06 Python
python 实现控制鼠标键盘
2020/11/27 Python
如何查看python关键字
2021/01/17 Python
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
医疗保健专业人士购物网站:Scrubs & Beyond
2017/02/08 全球购物
程序员机试试题汇总
2012/03/07 面试题
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
大学生活动总结怎么写
2014/04/29 职场文书
党员个人公开承诺书
2014/08/29 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
Nginx配置https原理及实现过程详解
2021/03/31 Servers
总结一些Java常用的加密算法
2021/06/11 Java/Android
Windows Server 2008 修改远程登录端口以及配置防火墙
2022/04/28 Servers
Hive HQL支持2种查询语句风格
2022/06/25 数据库