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 相关文章推荐
深入认识JavaScript中的函数
Jan 22 Javascript
让mayfish支持mysqli数据库驱动的实现方法
May 22 Javascript
js带按钮的提示框可供选择示例代码
Sep 17 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
Jun 08 Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
Oct 31 Javascript
使用ionic播放轮询广告的实现方法(必看)
Apr 24 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
May 12 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
Vue-input框checkbox强制刷新问题
Apr 18 Javascript
vue v-for直接循环数字实例
Nov 07 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
Jul 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
破解图片防盗链的代码(asp/php)测试通过
2010/07/02 PHP
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
CodeIgniter整合Smarty的方法详解
2017/08/25 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
jquery获取input表单值的代码
2010/04/19 Javascript
JavaScript学习点滴 call、apply的区别
2010/10/22 Javascript
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
jquery+ajax请求且带返回值的代码
2015/08/12 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
2018/01/02 Javascript
vue+webpack实现异步加载三种用法示例详解
2018/04/24 Javascript
浅谈Vue路由快照实现思路及其问题
2018/06/07 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
Python实现向服务器请求压缩数据及解压缩数据的方法示例
2017/06/09 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
python多线程下信号处理程序示例
2019/05/31 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
python将logging模块封装成单独模块并实现动态切换Level方式
2020/05/12 Python
遇到的Mysql的面试题
2014/06/29 面试题
公司建议书怎么写
2014/05/15 职场文书
学习优秀党务工作者先进事迹材料思想报告
2014/09/17 职场文书
朋友离别感言
2015/08/04 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书