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 相关文章推荐
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
用Javascript实现Sleep暂停功能代码
Sep 03 Javascript
理解Javascript_06_理解对象的创建过程
Oct 15 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
Aug 09 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
Apr 02 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
js中el表达式的使用和非空判断方法
Mar 28 Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 Javascript
JS实现数组的增删改查操作示例
Aug 29 Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
JS实现数组深拷贝的方法分析
Mar 06 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
Oct 30 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中用hash实现的数组
2011/07/17 PHP
解析关于wamp启动是80端口被占用的问题
2013/06/21 PHP
laravel手动创建数组分页的实现代码
2018/06/07 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
9个JavaScript评级/投票插件
2010/01/18 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
2012/03/01 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
2013/04/16 Javascript
Javascript基础教程之for循环
2015/01/18 Javascript
JS定义类的六种方式详解
2016/05/12 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
2016/12/24 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
Vue 2.0在IE11中打开项目页面空白的问题解决
2017/07/16 Javascript
全面介绍vue 全家桶和项目实例
2017/12/27 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
js实现倒计时器自定义时间和暂停
2019/02/25 Javascript
JS浏览器BOM常见操作实例详解
2020/04/27 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
python实现k-means聚类算法
2018/02/23 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
python制作英语翻译小工具代码实例
2019/09/09 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
OpenCV读取与写入图片的实现
2020/10/13 Python
韩国著名的在线综合购物网站:Akmall
2016/08/07 全球购物
毕业生的求职信范文分享
2013/12/04 职场文书
大学生演讲稿范文
2014/01/11 职场文书
电子商务专业求职信
2014/07/10 职场文书
毕业生班级鉴定评语
2015/01/04 职场文书
银行自荐信范文
2015/03/25 职场文书
婚姻出轨保证书
2015/05/08 职场文书
全面盘点MySQL中的那些重要日志文件
2021/11/27 MySQL
python使用torch随机初始化参数
2022/03/22 Python
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技