function demoCtrl($scope) { $scope.money = 120035; $scope.userdate = '2016-04-12'; $scope.obj = { id: 1, name: 'Peter' } $scope.destarray = ['a', 'b', 'c', 'd', 'e', 'f']; $scope.letters = 'abcdef'; $scope.arrayLimit = 3; $scope.letterLimit = 3; $scope.num = 1234556.1234567; $scope.lower = 'I am Peter.' $scope.upper = 'I am Ryan.' }
<div ng-app> <div ng-controller="demoCtrl"> <h1>AngularJs過濾器Demo</h1> <h3>加上貨幣符號currency</h3> <input type="number" ng-model="money"> <li>預設貨幣 ($): {{money | currency}}</li> <li>自訂貨幣格式 (日幣¥): {{money | currency:"JPY¥"}}</li> <h3>日期格式化date</h3> <input type="date" ng-model="userdate"> <li>日期原始資料:{{ userdate }}</li> <li>日期預設格式:{{ userdate | date }}</li> <li>日期自訂格式:{{ userdate | date:'yyyy 年 MM 月 dd 日' }}</li> <h3>轉為json字串</h3> <li>{{ obj | json }}</li> <h3>限制陣列or字串內的字元個數limitTo</h3> <li>限制陣列{{destarray}}: 限制長度 <input type="number" ng-model="arrayLimit"> ,輸出:{{ destarray | limitTo:arrayLimit }} </li> <li>限制字串{{letters}}: 限制長度 <input type="number" ng-model="letterLimit"> ,輸出: {{ letters | limitTo:letterLimit }} </li> <h3>可以為數值或指定小數以下位數number</h3> <input type="number" ng-model="num"> <li>預設3位小數:{{ num | number }}</li> <li>自訂5位小數{{ num | number:5 }}</li> <h3>轉小寫lowercase</h3> <input type="text" ng-model="lower"> <li>輸出:{{ lower | lowercase }}</li> <!-- uppercase --> <h3>轉大寫uppercase</h3> <input type="text" ng-model="upper"> <li>輸出:{{ upper | uppercase }}</li> </div> </div>