请说出 Augluar filter的两种使用方法？
参考回答
在 AngularJS 中，filter 有两种使用方法：
- 在模板中使用：通过管道符号 (
|) 直接在 HTML 模板中应用filter。 - 在 JavaScript 中使用：通过依赖注入
$filter服务，在控制器或服务中调用filter。
详细讲解与拓展
1. 在模板中使用 filter
这是最常见的方式，通过管道符号 (|) 将数据与 filter 结合使用，格式化或筛选数据。
语法：
{{ expression | filterName:parameter }}
示例 1：格式化日期
<p>{{ '2025-01-22' | date:'fullDate' }}</p>
输出：Wednesday, January 22, 2025
示例 2：数组过滤
<input type="text" ng-model="searchTerm" placeholder="Search">
<ul>
<li ng-repeat="item in items | filter:searchTerm">{{ item }}</li>
</ul>
- 如果
items = ['apple', 'banana', 'orange']，输入ap时，列表会过滤并显示apple。
2. 在 JavaScript 中使用 filter
通过注入 $filter 服务，可以在控制器或服务中调用 filter，实现对数据的动态处理。
语法：
var filteredData = $filter('filter')(array, expression);
示例 1：使用 $filter 筛选数组
angular.module('myApp', [])
.controller('myCtrl', function(scope,filter) {
scope.items = ['apple', 'banana', 'orange'];scope.filteredItems = filter('filter')(scope.items, 'ap'); // 结果：['apple']
});
示例 2：格式化货币
angular.module('myApp', [])
.controller('myCtrl', function(scope,filter) {
scope.price = 1234.56;scope.formattedPrice = filter('currency')(scope.price, 'USD');
// 结果：'USD1,234.56'
});
扩展：两种方式的使用场景
- 模板中使用：
- 优点：简单直观，适合用于小型、直接的操作。
- 缺点：如果数据量较大，频繁操作可能引发性能问题。
- JavaScript 中使用：
- 优点：可以对复杂逻辑进行预处理，避免模板中过度复杂的表达式。
- 缺点：需要额外编写逻辑，可能会增加代码量。
总结
AngularJS 的 filter 提供了 模板中使用 和 JavaScript 中调用 $filter 服务 两种方式，分别适合简单场景和复杂逻辑处理。选择具体方式时，需根据实际需求和性能考虑，合理地使用 filter 可以提高代码可读性和维护性。