过滤器current number date

来源：互联网发布：java设置编码格式编辑：程序博客网时间：2024/06/04 18:35

$filter

- $filterProvider
- service in module ng

Filters are used for formatting data displayed to the user.

The general syntax in templates is as follows:

{{ expression [| filter_name[:parameter_value] ... ] }}

Usage

$filter(name);

Arguments

ParamTypeDetailsnameString

Name of the filter function to retrieve

Returns

Function

the filter function

什么是angular的过滤器：

是用于对数据的格式化，或者筛选的函数，可以直接在模板中通过一种语法使用
{{expression | filter}}
{{expression | filter | filter}
{{expression | filter：param,......}}

过滤器的种类：

number

<body>    <div ng-app="myApp">        <div ng-controller="firstController">            {{123456789 | number}}//输出为：123,456,789

             {{123456789 | number:3}}//输出结果保留三位小数点：123,456,789.000
</div>

    </div><script type="text/javascript" src="../../vendor/angular/angularjs.js"></script><script type="text/javascript" src="app/index.js"></script></body>

currency

{{123456 | currency}}输出为：$123,456.00 {{123456 | currency:'￥'}}输出为：￥123,456.00

date

JSPage:

$scope.todayDate = new Date;

HTMLPage:

{{todayDate}}输出为："2014-11-23T23:05:17.574Z"

   {{todayDate | date: 'medium'}}输出为："Nov 24, 2014 4:49:56 PM"  {{todayDate | date: 'short'}}输出为："11/24/14 4:49 PM"  {{todayDate | date: 'longDate'}}输出为："November 24, 2014"

  {{todayDate | date: 'fullDate'}}输出为："Monday, November 24, 2014"   {{todayDate | date: 'mediumDate'}}输出为："Nov 24, 2014"

   {{todayDate | date: 'shortDate'}}输出为："11/24/14"

   {{todayDate | date: 'mediumTime'}}输出为："5:03:00 PM"
   {{todayDate | date: 'shortTime'}}输出为："5:03 PM"
  {{todayDate | date: 'y'}}输出为："2014"  {{todayDate | date: 'yy'}}输出为："14"  {{todayDate | date: 'yyyy'}}输出为："2014"
   {{todayDate | date: 'M'}}输出为："11"  {{todayDate | date: 'MM'}}输出为："11"  {{todayDate | date: 'MMM'}}输出为："Nov"
  {{todayDate | date: 'MMMM'}}输出为："November"
  {{todayDate | date: 'd'}}输出为："24"  {{todayDate | date: 'dd'}}输出为："24"
  {{todayDate | date: 'EEE'}}输出为："Mon"
  {{todayDate | date: 'EEEE'}}输出为："Monday"
   {{todayDate | date: 'h'}}输出为："7"  {{todayDate | date: 'hh'}}输出为："07"  {{todayDate | date: 'H'}}输出为："19"
  {{todayDate | date: 'HH'}}输出为："19"

min:

  {{todayDate | date: 'm'}}输出为："16"  {{todayDate | date: 'mm'}}输出为："11"

second:

  {{todayDate | date: 's'}}输出为："2"  {{todayDate | date: 'ss'}}输出为："02"

{{todayDate | date: 'y-M-d H:m:s'}} : 2014-12-1 9:50:25

JSON

controller('firstController',function($scope,factoryName,$filter)//在controller依赖注入$filter（angular提供）

var number = $filter('number')(3000) //在JS里面如何使用number功能。    console.log(number);

//用于调试
var jsonString = $filter('json')($scope.date);

console.log(jsonString);

console.log($scope.date);
console显示内容：
{  "message": "this is the message we shared",  "city": [    {      "name": "Chicago"    },    {      "name": "LA"    },    {      "name": "New York"    }  ]} 
Object {message: "this is the message we shared", city: Array[3]}
city: Array[3]message: "this is the message we shared"
__proto__: Object

limitTo

{{[1,2,3,4,5,6,7,8,9] |limitTo:3}}输出为："[1,2,3]"

{ { [ 1, 2, 3, 4, 5, 6, 7, 8, 9] | limitTo:-3 }}输出为："[7,8,9]"

lowercase

{{date.message| lowercase}}输出为："this is the message what we shared"

uppercase

{{date.message | uppercase}}输出为："THIS IS THE MESSAGE  WHAT WE SHARED"

filter(String|function|object）

angular.module('myApp',[]).factory('factoryName', function(){    return{        message:'this is the message we shared',        city:[            {                name:'Chicago'            },            {                name:'LA'            },            {                name:'New York'            }        ]        }})

.controller('firstController', function($scope,factoryName){        $scope.date = factoryName;        $scope.todayDate = new Date;})

{{date.city | filter : 'Chi'}}输出为："[{"name":"Chicago"}]"  只要字段里出现了Chi就会显示出来, 而且只是去搜索value，而不会去查找key。

    {{date.city | filter : {name:'a'} }}输出为："[{"name":"Chicago"},{"name":"LA"}]" 只查找name中含有a的value，且不分大小写。

number orderBy(String|function|object）

其实是一个排序

{{date.city | orderBy : 'name'}}输出"[{"name":"Chicago"},{"name":"LA"},{"name":"New York"}]"这个是正序

{{date.city | orderBy : '-name'}}这个是反序，在前面加一个“-”号

0 0