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 相关文章推荐
prototype 源码中文说明之 prototype.js
Sep 22 Javascript
js实现创建删除html元素小结
Sep 30 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
Dec 02 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 Javascript
基于jquery实现图片放大功能
May 07 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
bootstarp modal框居中显示的实现代码
Feb 18 Javascript
微信小程序如何获取用户信息
Jan 26 Javascript
微信小程序Flex布局用法深入浅出分析
Apr 25 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
Apr 15 Javascript
vue动画—通过钩子函数实现半场动画操作
Aug 09 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
图书管理程序(一)
2006/10/09 PHP
一个典型的PHP分页实例代码分享
2011/07/28 PHP
php不使用copy()函数复制文件的方法
2015/03/13 PHP
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
jQuery中parent()方法用法实例
2015/01/07 Javascript
js获取页面description的方法
2015/05/21 Javascript
jQuery ajax提交Form表单实例(附demo源码)
2016/04/06 Javascript
jQuery绑定事件的几种实现方式
2016/05/09 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
微信小程序 本地数据读取实例
2017/04/27 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
如何从零开始手写Koa2框架
2019/03/22 Javascript
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
python中常用的九种预处理方法分享
2016/09/11 Python
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
Python基本数据结构之字典类型dict用法分析
2019/06/08 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
python3中datetime库,time库以及pandas中的时间函数区别与详解
2020/04/16 Python
Expedia印度:您的一站式在线旅游网站
2017/08/24 全球购物
ONLY德国官方在线商店:购买时尚女装
2017/09/21 全球购物
美国巧克力喷泉品牌:Sephra
2019/05/05 全球购物
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
Android笔试题总结
2014/11/29 面试题
护士毕业生自荐信
2014/02/07 职场文书
小学清明节活动方案
2014/03/08 职场文书
大学生社会实践方案
2014/05/11 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
个人授权委托书格式
2014/08/30 职场文书
Anaconda配置各版本Pytorch的实现
2021/08/07 Python
Python TypeError: ‘float‘ object is not subscriptable错误解决
2022/12/24 Python