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 相关文章推荐
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
Jun 26 Javascript
jQuery实现进度条效果代码
Dec 17 Javascript
ionic 上拉菜单(ActionSheet)实例代码
Jun 06 Javascript
javascript如何定义对象数组
Jun 07 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 Javascript
基于bootstrap写的一点localStorage本地储存
Nov 21 Javascript
JS数组去重常用方法实例小结【4种方法】
May 28 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
Aug 30 Javascript
Vue开发之封装上传文件组件与用法示例
Apr 25 Javascript
解决layer弹出层msg的文字不显示的问题
Sep 11 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
Apr 26 Javascript
jQuery 动画与停止动画效果实例详解
May 19 jQuery
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/26 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
php删除指定目录的方法
2015/04/03 PHP
yii分页组件用法实例分析
2015/12/28 PHP
CodeIgniter集成smarty的方法详解
2016/05/26 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
window.onbeforeunload方法在IE下无法正常工作的解决办法
2010/01/23 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
jQuery使用技巧简单汇总
2013/04/18 Javascript
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
jQuery实现隔行背景色变色
2014/11/24 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
在JavaScript应用中实现延迟加载的方法
2015/06/25 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
vue事件修饰符和按键修饰符用法总结
2017/07/25 Javascript
vue 组件高级用法实例详解
2018/04/11 Javascript
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
python获取各操作系统硬件信息的方法
2015/06/03 Python
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
python xpath获取页面注释的方法
2019/01/14 Python
浅谈Django中view对数据库的调用方法
2019/07/18 Python
python利用tkinter实现屏保
2019/07/30 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
中国酒类在线零售网站:酒仙网
2016/08/20 全球购物
门卫工作岗位职责
2013/12/17 职场文书
设备动力科岗位职责范本
2014/02/23 职场文书
医院院务公开实施方案
2014/05/03 职场文书
六查六看心得体会
2014/10/14 职场文书
如何获取numpy array前N个最大值
2021/05/14 Python
Kubernetes控制节点的部署
2022/04/01 Servers