AngularJs_defaultFilterDemo

default data filter demo in AngularJs.

by Ryan Hsu

HTML

<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>

JavaScript

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.'
}