简述angular自定义过滤器在页面和控制器中的使用

AngularJS另一个特点就是提供了过滤器,可以通过操作UNIX下管道的方式,操作数据结果。

  通过使用管道,可以便于双向的数据绑定中视图的展现。

  过滤器在处理过程中,将数据变成新的格式,而且可以使用管道这种链式风格,还能接受附加的参数。

首先设置自定义过滤器。

  定义模块名:angular      

   .module('myApp')
          .filter('filterName',function(){
            return function(要过滤的对象,参数1,参数2,...){
              return Obj; //这里返回的是过滤后的对象
            }
          });

页面中的使用。

{{obj | filterName}} ====> obj是要过滤的对象

控制器中使用。

  首先要注入$filter,使用的时候

 $filter("filterName")(要过滤的对象,参数1,参数2,...);

以上所述是小编给大家介绍的angular自定义过滤器在页面和控制器中的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • Angular.Js中过滤器filter与自定义过滤器filter实例详解

    本文主要给大家介绍了Angular.Js过滤器filter与自定义过滤器filter的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: 一.AngularJS的filter过滤器: uppercase|lowercase:大小写转换过滤 json:json格式过滤 date:日期格式过滤 number:数字格式过滤 currency:货币格式过滤 filter:查找 limitTo:字符串对象截取 orderBy:对象排序 <!DOCTYPE html> <html lang=&

  • 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创建自定义的过滤器的方法

    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中自定义过滤器

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

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

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

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

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

  • 详解Angular的内置过滤器和自定义过滤器【推荐】

    在实际的开发过程中,很多後端返回给我们的数据都是需要格式化处理的,在angular中为我们内置提供了filter指令,可以很方便的对数据进行处理.首先我们看看在视图中是如何使用过滤器的. 1.currency(货币)格式化 <div ng-controller="Aaa"> <p>{{name | currency:'¥'}}</p> </div> <script type="text/javascript"&g

  • 简述angular自定义过滤器在页面和控制器中的使用

    AngularJS另一个特点就是提供了过滤器,可以通过操作UNIX下管道的方式,操作数据结果. 通过使用管道,可以便于双向的数据绑定中视图的展现. 过滤器在处理过程中,将数据变成新的格式,而且可以使用管道这种链式风格,还能接受附加的参数. 首先设置自定义过滤器. 定义模块名:angular .module('myApp') .filter('filterName',function(){ return function(要过滤的对象,参数1,参数2,...){ return Obj; //这里返

  • Django自定义过滤器定义与用法示例

    本文实例讲述了Django自定义过滤器定义与用法.分享给大家供大家参考,具体如下: 一.自定义过滤器的介绍 前面我们就介绍过过滤器其实就是一个函数,把要过来的字段传递到一个函数内,进行加工处理,返回一个新的值展现在页面中,在实际开发中系统自带的过滤器有时候不能满足我们的需求的时候就要自定义 二.Django中自定义过滤器有两种方式 1.在组件(App)中的templatetags创建一个单独的py文件 2.单独创建一个组件(App)用来存放项目中所有的自定义过滤器 三.在项目中的组件中创建自定义

  • Avalon中文长字符截取、关键字符隐藏、自定义过滤器

    关于AvalonJS avalon是一个简单易用迷你的MVVM框架,它最早发布于2012.09.15,为解决同一业务逻辑存在各种视图呈现而开发出来的. 事实上,这问题其实也可以简单地利用一般的前端模板加jQuery 事件委托 搞定,但随着业务的膨胀, 代码就充满了各种选择器与事件回调,难以维护.因此彻底的将业务与逻辑分离,就只能求助于架构. 最初想到的是MVC,尝试过backbone,但代码不降反升,很偶尔的机会,碰上微软的WPF, 优雅的MVVM架构立即吸引住我,我觉得这就是我一直追求的解决之

  • Yii控制器中filter过滤器用法分析

    本文实例讲述了Yii控制器中filter过滤器用法.分享给大家供大家参考,具体如下: 指定过滤动作,(如下projectContext()方法在新建,列表,管理页面调用时使用) public function filters() { return array( 'accessControl', // perform access control for CRUD operations 'postOnly + delete', // we only allow deletion via POST

  • Angular17之Angular自定义指令详解

    1 什么是HTML HTML文档就是一个纯文本文件,该文件包含了HTML元素.CSS样式以及JavaScript代码:HTML元素是由标签呈现,浏览器会为每个标签创建带有属性的DOM对象,浏览器通过渲染这些DOM节点来呈现内容,用户在浏览器中看到的内容就是浏览器渲染DOM对象后的结果. 2 指令的分类 组件.属性指令.结构性指令 3 指定义指令常用到的一些常量 3.1 Directive 用于装饰控制器类来指明该控制器类是一个自定义指令控制器类 3.2 ElementRef 作为DOM对象的引用

随机推荐