如何在AngularJS中利用管道進行數據轉換與格式化

在 AngularJS 中，管道（Pipe）是一種用于對數據進行轉換和格式化的內置機制

1. 創建自定義管道：

要創建自定義管道，需要使用 angular.module() 函數定義一個新的模塊，并在該模塊上添加一個名為 pipe 的依賴。然后，使用 factory() 函數創建一個新的管道。例如，創建一個將日期格式化為 “yyyy-MM-dd” 格式的管道：

angular.module('myApp', [])
  .factory('formatDatePipe', function() {
    return function(input, format) {
      if (!input) return '';
      var date = new Date(input);
      if (!date) return '';
      var formattedDate = date.getFullYear() + '-' +
        ('0' + (date.getMonth() + 1)).slice(-2) + '-' +
        ('0' + date.getDate()).slice(-2);
      return formattedDate;
    };
  });

2. 在 HTML 中使用管道：

要在 HTML 中使用自定義管道，需要在管道名稱后添加一個豎線（|）符號，然后傳遞要轉換的數據作為參數。例如，將上面創建的 formatDatePipe 用于將 $scope.date 變量格式化為 “yyyy-MM-dd” 格式：

<p>{{ date | formatDatePipe }}</p>

此外，還可以傳遞一個可選的第二個參數來指定日期格式。例如，將日期格式化為 “dd/MM/yyyy” 格式：

<p>{{ date | formatDatePipe:'dd/MM/yyyy' }}</p>

3. 使用內置管道：

AngularJS 還提供了一些內置管道，如 currency、date、filter 等，可用于對數據進行常見轉換和格式化。使用內置管道的方法與使用自定義管道類似，只需在管道名稱后添加一個豎線（|）符號，并傳遞要轉換的數據作為參數。例如，使用 date 管道將 $scope.date 變量格式化為 “yyyy-MM-dd” 格式：

<p>{{ date | date:'yyyy-MM-dd' }}</p>

總之，在 AngularJS 中，可以通過創建自定義管道和使用內置管道來對數據進行轉換和格式化。使用管道時，只需在管道名稱后添加一個豎線（|）符號，并傳遞要轉換的數據作為參數。