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 DOM 学习第九章 选取范围的介绍
Feb 19 Javascript
javascript作用域容易记错的两个地方分析
Jun 22 Javascript
JS:window.onload的使用介绍
Nov 13 Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 Javascript
jquery显示loading图片直到网页加载完成的方法
Jun 25 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
Feb 27 Javascript
js无法获取到html标签的属性的解决方法
Jul 26 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
Vue中使用Sortable的示例代码
Apr 07 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
JavaScript实现数字前补“0”的五种方法示例
Jan 03 Javascript
JavaScript中的回调函数实例讲解
Jan 27 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中遍历二维数组的几种方法详解
2013/06/08 PHP
解析csv数据导入mysql的方法
2013/07/01 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
PHP实现的堆排序算法详解
2017/08/17 PHP
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
location对象的属性和方法应用(解析URL)
2013/04/12 Javascript
js加减乘除丢失精度问题解决方法
2014/05/16 Javascript
node.js中实现同步操作的3种实现方法
2014/12/05 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
详解Vue快速零配置的打包工具——parcel
2018/01/16 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
2019/07/10 jQuery
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
2019/11/25 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
2020/05/23 Javascript
JavaScript大数相加相乘的实现方法实例
2020/10/18 Javascript
Python中列表(list)操作方法汇总
2014/08/18 Python
深入理解Python中命名空间的查找规则LEGB
2015/08/06 Python
一份python入门应该看的学习资料
2018/04/11 Python
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
selenium+python实现自动化登录的方法
2018/09/04 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
酒店应聘自荐信
2013/11/09 职场文书
医学院校毕业生自荐信范文
2014/01/01 职场文书
生产部岗位职责范文
2014/02/07 职场文书
岗位职责风险防控
2014/02/18 职场文书
继承公证书样本
2014/04/04 职场文书
《海伦?凯勒》教学反思
2014/04/17 职场文书
无犯罪记录证明
2014/09/19 职场文书
2014年社区综治工作总结
2014/11/17 职场文书