AngularJS实现的自定义过滤器简单示例

 更新时间:2019年02月02日 11:38:40   作者:前端林三哥  
这篇文章主要介绍了AngularJS实现的自定义过滤器,结合实例形式分析了AngularJS自定义过滤器的简单定义与使用操作技巧,需要的朋友可以参考下

本文实例讲述了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相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结

希望本文所述对大家AngularJS程序设计有所帮助。

相关文章

  • AngularJS轻松实现双击排序的功能

    AngularJS轻松实现双击排序的功能

    网上已经有AngularJS比较多的相关教程了,那么这篇文章我们一起来看一个AngularJS双击排序的例子,对大家日常开发很有帮助的,有需要的可以参考借鉴。
    2016-08-08
  • Angular处理未可知异常错误的方法详解

    Angular处理未可知异常错误的方法详解

    这篇文章主要给大家介绍了关于Angular如何处理未可知异常错误的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • 浅析Angular19 自定义表单控件

    浅析Angular19 自定义表单控件

    这篇文章主要介绍了Angular19 自定义表单控件的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-01-01
  • Angular通过angular-cli来搭建web前端项目的方法

    Angular通过angular-cli来搭建web前端项目的方法

    这篇文章主要介绍了Angular通过angular-cli来搭建web前端项目的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • Angularjs中controller的三种写法分享

    Angularjs中controller的三种写法分享

    这篇文章给大家介绍了angularjs中controller的三种写法,每种写法都给出了示例代码,对大家理解和学习很有帮助,有需要的朋友们可以参考借鉴。
    2016-09-09
  • angular实现图片懒加载实例代码

    angular实现图片懒加载实例代码

    本篇文章主要介绍了angular实现图片懒加载实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • AngularJs导出数据到Excel的示例代码

    AngularJs导出数据到Excel的示例代码

    本篇文章主要介绍了AngularJs导出Excel的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • Angularjs使用过滤器完成排序功能

    Angularjs使用过滤器完成排序功能

    这篇文章主要为大家详细介绍了Angularjs使用过滤器完成排序功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • 三种AngularJS中获取数据源的方式

    三种AngularJS中获取数据源的方式

    这篇文章主要介绍了三种AngularJS中获取数据源的方式,需要的朋友可以参考下
    2016-02-02
  • AngularJS语法详解

    AngularJS语法详解

    本文通过示例向大家介绍了AngularJS语法的使用,小伙伴们认真研读下吧,非常的实用哦。
    2015-01-01

最新评论