angular中的过滤器有：

　　currency 过滤货币

　　number  过滤数字，

　　date  过滤日期

　　json 把js对象过滤为json字符串

　　limitTo  截取字符串，参数是正数则从左往右截取，负数从末尾开始数起，没有0，从1开始

　　lowercase 把字符串转为小写

　　uppercase 把字符串转为大写

　　orderBy  根据给定的对象的属性名对对象进行排序，可以升序也可以降序 参数为 true false

　　filter 根据参数过滤数组或者对象，如果参数是一个字符串，那么可以过滤出数组中包含这个字符串的元素。

　　$filter  在脚本中写过滤器

　　.filter 自定义过滤器

<!DOCTYPE html>

<html ng-app="myApp">

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        span{

            display:inline-block;

            font-weight:bold;

            font-size:20px;

            margin-right:10px;

        }

    </style>

    <script src="../../Angular/angular.min.js"></script>

</head>

<body>

<div ng-controller="myController">

    <p><span>currency => </span>{{123.5555555|number:1|currency:"￥"}}</p>

    <p>{{name}}</p>

    <h2>日期</h2>

    <p>{{today | date:"yyyy:MM:dd:HH:mm:ss.sss"}}</p>

    <h2>json</h2>

    <p>{{obj|json}}</p>

    <h2>limitTo</h2>

    {{arr| limitTo:-1}}

    <h2>orderBy</h2>

    <p>{{arrObj|orderBy:"name":true}}</p>

    <h2>自定义过滤器</h2>

    <p>{{"aalkdfa"|zdy}}</p>

</div>

<script>

    angular.module("myApp",[])

            .controller("myController",function($scope,$filter,$interval){

                $scope.name = $filter("uppercase")("aklkjjfhakfkha");

                //日期

                $interval(function(){

                    $scope.today = new Date();

                },1);

                //json

                $scope.obj = {

                    name:"chef",

                    age:"three"

                }

                //limilTo

                $scope.arr = ["1","3","3","8"];

                //orderBy

                $scope.arrObj = [

                    {name:"c",age:"22"},

                    {name:"w",age:"22"},

                    {name:"a",age:"22"},

                    {name:"b",age:"22"}

                ];

            })

    //自定义过滤器 input 是要过滤的字符串

            .filter("zdy",function(){

                return function(input){

                    //把第一个字符改为大写

                    return input[0] = input[0].toUpperCase()+input.slice(1);

                }

            })

</script>

</body>

</html>

　　

Angular过滤器的更多相关文章

  1. Angular过滤器 自定义及使用方法

    首先设置自定义过滤器. 定义模块名:angular .module('myApp') .filter('filterName',function(){ return function(要过滤的对象,参 ...

  2. angular过滤器基本用法

    1.过滤器主要用于数据的筛选,可以直接在模板使用 语法: {{expression | filter}} {{expression | filter | filter2}} {{expression ...

  3. Angular 过滤器的简单使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. angular过滤器使用 自定义过滤器

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

  5. 如何angular过滤器进行排序？？？

    首先定义一个json文件: 然后写HTML文件: <div id="box"> <!--第一个下拉框--> <select ng-model=&quo ...

  6. angular 过滤器（日期转换，时间转换，数据转换等）

    (function() { 'use strict'; /** * myApp Module * * Description */ angular.module('myApp') .filter('i ...

  7. Angular 过滤器

    <!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...

  8. 简话Angular 04 Angular过滤器详解

    一句话: filter是万能的数据处理器,可以过滤数据,排序数据,删除数据,扩展数据 1. 内置filter大全 url: https://docs.angularjs.org/api/ng/filt ...

  9. angular过滤器在html和js中的使用

    在HTML中使用格式为:{{数据 | 过滤器名称:条件一:条件二--}}:过滤条件间使用:隔开 例如: 在代码中一般格式为:  变量 = $filter("过滤器名称")(被过滤数 ...

随机推荐

  1. 要学Java，怎么高效地学习，怎么规划

    要学Java,怎么高效地学习,怎么规划?   题主是一个个例,99%的人(包括我自己)都没有题主这样的经历,也很难提出具有很强参考性的java学习建议.我倒是之前面试过一个跟题主有点类似的人,拿出来分 ...

  2. 创建面注记PolygonElement

    1.根据4点创建一个面 /// <summary> /// 根据4个点创建图形,点序要顺时针 /// </summary> /// <param name="p ...

  3. [NHibernate]组件之依赖对象

    目录 写在前面 文档与系列文章 组件之依赖对象 一个例子 总结 写在前面 周一至周四一直在成都出差,也一直没有更新博客了,一回到家第一件事就是扒一扒最近博客园更新的文章,然后把想看的收藏了,大概有20 ...

  4. Sizzle选择器引擎介绍

    一.前言 Sizzle原来是jQuery里面的选择器引擎,后来逐渐独立出来,成为一个独立的模块,可以自由地引入到其他类库中.我曾经将其作为YUI3里面的一个module,用起来畅通无阻,没有任何障碍. ...

  5. PHP 语言特性

    一.PHP 超级全局变量 PHP 超级全局变量列表: $GLOBALS $_SERVER $_REQUEST $_POST $_GET $_FILES $_ENV $_COOKIE $_SESSION ...

  6. Android中如何控制元素的显示隐藏？

    在Android程序中,有时需要程序开启时默认隐藏某个控件,当单击某个按钮时才触发显示控件的内容.比如在查询员工资料时,提交查询后再显示查询到的表格内容: Android中控制元素的隐藏参考以下代码. ...

  7. NOSDK--SDK一键打包及统一接入的实现（前言）

    前言 一,一键打包的实现 1.1 shell脚本执行流程介绍 1.2 自动刷新mk文件的脚本介绍 1.3 编译及拷贝资源的脚本介绍 1.4 打包及签名的脚本介绍 1.5 mac下的脚本环境配置及脚本的 ...

  8. MVVM开发模式简单实例MVVM Demo【续】

    本文将接着上篇文章,介绍一下三点:(Universal App) 1.将添加Product集合,绑定到列表 2.给点击ListBox的添加选项改变时的事件(要附加依赖属性,和Button点击事件不同) ...

  9. flash_header.S ( freescale imx6 board)

    /* * Copyright (C) 2011-2012 Freescale Semiconductor, Inc. * * This program is free software; you ca ...

  10. nyoj220 推桌子(贪心算法)

    这道题太坑了,from 和to有可能写反,还得正过来: 推桌子 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 The famous ACM (Advanced Co ...