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程序设计有所帮助。

赞 (0)

相关推荐

  • 使用AngularJS创建自定义的过滤器的方法

    Angularjs过滤器是 angularjs非常棒的特性之一.有朝一日,你可能需要使用自定义过滤器,幸运的是,你找到了这篇博文. 下面显示的是自定义过滤器长什么样子(请注意myfilter): 我们的自定义过滤器叫做 "myfilter", 它有由 ':'隔开的4个参数. 这是一个将会用到的样本输入: $scope.friends = [{name:'John', phone:'555-1276'}, {name:'Annie', phone:'800-BIG-MARY'}, {na

  • 详解AngularJS中$filter过滤器使用(自定义过滤器)

    1.内置过滤器 * $filter 过滤器,是angularJs中用来处理数据以更好的方式展示给我用户.比如格式化日期,转换大小写等等. * 过滤器即有内置过滤器也支持自定义过滤器.内置过滤器很多,可以百度.关键是如何使用: * 1.在HTML中直接使用内置过滤器 * 2.在js代码中使用内置过滤器 * 3.自定义过滤器 * * (1)常用内置过滤器 * number 数字过滤器,可以设置保留数字小数点后几位等 * date 时间格式化过滤器,可自己设置时间格式 * filter 过滤的数据一般

  • AngularJS自定义过滤器用法经典实例总结

    本文实例讲述了AngularJS自定义过滤器用法.分享给大家供大家参考,具体如下: 过滤器结构 {{带过滤数据 | 过滤器名:参数1:参数2:参数3.....}} app.filter('过滤器名', function () { return function (待过滤数据, 参数....) { ...... return 已过滤数据; } 示例一:是否包含 <!doctype html> <html ng-app="myApp"> <head> &

  • AngularJS中过滤器的使用与自定义实例代码

    AngularJS中过滤器的使用与自定义实例代码

    前言 相信大家都知道过滤器的使用:一种是在html中的使用,一种是在js代码中的使用,下面我们来通过实例深入了解. 实例代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>过滤器</title> <script src="day2/src/angular.js"></script> <styl

  • angularJs自定义过滤器实现手机号信息隐藏的方法

    如下所示: <div ng-app="module" ng-controller="ctrl"> <table border="1" width="600"> <tr> <td>编号</td> <td>姓名</td> <td>手机号</td> </tr> <tr ng-repeat="(k,v

  • AngularJS 自定义过滤器详解及实例代码

    AngularJS 自定义过滤器详解及实例代码

    AngularJS另一个特点就是提供了过滤器,可以通过操作UNIX下管道的方式,操作数据结果. 通过使用管道,可以便于双向的数据绑定中视图的展现. 过滤器在处理过程中,将数据变成新的格式,而且可以使用管道这种链式风格,还能接受附加的参数. 实现方式 下面看一下如何定义声明一个过滤器,首先依然是要创建我们自己的模块myAppModule var myAppModule=agular.module("myApp",[]); 接下来在模块的基础上,创建过滤器: myAppModule.fil

  • 详解AngularJS中自定义过滤器

    过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果.主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等.ng内置了一些过滤器,它们是:currency(货币).date(日期).filter(子串匹配).json(格式化json对象).limitTo(限制个数).lowercase(小写).uppercase(大写).number(数字).orderBy(排序).总共九种.除此之外还可以自定义过滤器,这个就强大了,可以满足任何

  • Angularjs 依赖压缩及自定义过滤器写法

    具体代码如下所示: <!DOCTYPE html> <html> <body> <header> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="angular.min.js"></script> <script src="filt

  • AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例

    AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例

    本文实例讲述了AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.jb51.net ng-repeat去除重复</title> <script src="http://apps.bdimg.com/libs/a

  • 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

  • angularjs自定义过滤器demo示例

    angularjs自定义过滤器demo示例

    本文实例讲述了angularjs自定义过滤器demo.分享给大家供大家参考,具体如下: 这个基于angularjs的过滤器是最近做的"信息管理学院实验室预约"项目中的一个小功能. 以下为数据: $scope['classes']=[{id:1,name:"H503",capacity:40,software:"photoshop,金蝶,AI",freeTime:"周一1-2-3,周五1-2-3,周一5-6,"}, {id:2,

  • AngularJS入门教程之过滤器用法示例

    AngularJS入门教程之过滤器用法示例

    本文实例讲述了AngularJS过滤器用法.分享给大家供大家参考,具体如下: 在前面几节里我们已经接触过AngularJS的表达式,表达式的作用是向视图中输出字面量或$scope对象中的属性值.在输出之前我们可以通过过滤器来格式化输出的数据. 过滤器的使用非常简单,我们看一下下面的代码: <!DOCTYPE html> <html ng-app> <head lang="en"> <meta charset="UTF-8"&

  • AngularJs expression详解及简单示例

    表达式(Expressions)是类Javascript的代码片段,通常放置在绑定区域中(如{{expression}}).表达式通过$parse服务(http://code.angularjs.org/1.0.2/docs/api/ng.$parse)解析执行. 例如,以下是angular中有效的表达式: 1+2 3*10 | currency user.name 一.Angular表达式 vs. Js 表达式 这很容易让人将angular视图表达式联想为javascript表达式,但这并不完

  • AngularJs Forms详解及简单示例

    控件(input.select.textarea)是用户输入数据的一种方式.Form(表单)是这些控件的集合,目的是将相关的控件进行分组. 表单和控件提供了验证服务,所以用户可以收到无效输入的提示.这提供了更好的用户体验,因为用户可以立即获取到反馈,知道如何修正错误.请记住,虽然客户端验证在提供良好的用户体验中扮演重要的角色,但是它可以很简单地被绕过,因此,客户端验证是不可信的.服务端验证对于一个安全的应用来说仍然是必要的. 一.Simple form 理解双向数据绑定的关键directive是

  • Android编程实现Toast自定义布局简单示例

    Android编程实现Toast自定义布局简单示例

    本文实例讲述了Android编程实现Toast自定义布局的方法.分享给大家供大家参考,具体如下: 不知道各位客官是不是觉得系统的toast的信息很难看呢,默认的但黑色背景,毫无色彩. 那么接下来我就教大家用最简单的方式自定义toast布局吧. 首先加载一个自定义的布局 LayoutInflater inflater = context.getLayoutInflater(); View view=inflater.inflate(R.layout.toast_info, null); 然后找到里

随机推荐