angularJS的過濾器！

標籤：script   ext   四捨五入   oca   長度   div   使用者   選項   angularjs   

angularJS過濾器：

filter

currency

date

filter

json

limitTo

lowercase

number

orderBy

uppercase

......

Filter過濾器：

過濾器的主要用途就是一個格式化 / 篩選資料的小工具；

一般用於服務端儲存的資料轉換為使用者介面可以理解的資料；

常見需要使用Filter的資料有：

- 時間 1288323623006

 

currency：它是用來過濾貨幣：作用把數字過濾成 一個貨幣：使用：豎杠+過濾器名稱

<div ng-app=><h1>{{20000 | currency}}</h1></div>//效果：$20,000.00

沒有多少意義，國際標準貨幣，對我們不實用；

 

date ：轉化為時間：

<div ng-app=><h1>{{1288323623006 | date}}</h1>//效果 Oct 29, 2010<h1>{{1288323623006 | date:‘yyyy-MM-dd HH:mm:ss‘}}</h1>//效果 2010-10-29 11:40:23// 這裡是英文的可以使用 angular-locale_zh-cn.js 來進行漢化</div>

 

json過濾器：

<div ng-app="myApp" ng-controller="myAppController">    {{jsonDate}}<br>    {{jsonDate | json}}</div><script type="text/javascript">var myApp = angular.module(‘myApp‘,[]);myApp.controller(‘myAppController‘,[‘$scope‘,function($scope){    $scope.jsonDate = {        zifuchuan:‘張三‘,        shuzi:19,        bool:false,        json:{name:‘老王‘,age:18},        shuzu:[{name:‘老王‘,age:‘18‘},{name:‘老王‘,age:‘18‘}]    };}]);</script>

 

limitTo過濾器：限制到：

作用：用來控制字元串展示多少長度；

<div ng-app>{{‘www.baidu.com,baidu.com‘ | limitTo:10}}</div>//www.baidu.

具體文法：

{{limiTo_expression | limitTo:limit:begin}}

limit是必選項，begin是可選項；

 

number過濾器： 格式化（保留小數）這裡會進行四捨五入

<div ng-app>{{1459824.1542558 | number:2}}</div>// 效果：1,459,824.15

 

接下來的過濾器，在使用過程中在做闡述；

 

angularJS的過濾器！