📌  相关文章
📜  AngularJS |筛选器(1)

📅  最后修改于: 2023-12-03 14:39:14.420000             🧑  作者: Mango

AngularJS | 筛选器

在 AngularJS 中，筛选器（Filter）用于过滤并转换数据，可以在表达式中通过管道符号（|）来使用它们。AngularJS 默认提供了一些常用的筛选器，同时也可以自定义筛选器来满足特定需求。

内置过滤器
1. currency

用于格式化货币值，将数值转换为货币格式并显示相应符号。

语法：{{ expression | currency : symbol : fractionSize }}

其中，symbol 为货币符号（默认为 "$"），fractionSize 为保留的小数位数（默认为 2）。

示例：

<div ng-app="">
  <p>原始值：{{ price }}</p>
  <p>默认格式：{{ price | currency }}</p>
  <p>自定义格式：{{ price | currency : "¥" : 0 }}</p>
</div>

输出结果：

原始值：100
默认格式：$100.00
自定义格式：¥100
2. date

用于格式化日期值，将日期对象或字符串按照指定格式进行格式化。

语法：{{ expression | date : format : timezone }}

其中，format 为日期格式（默认为 "medium"，更多选项见下方表格），timezone 为时区（默认使用本地时区）。

| 选项 | 格式 | | -------- | ---------------- | | short | M/d/yy h:mm a | | medium | MMM d, y h:mm:ss | | long | MMMM d, y h:mm:ss a z | | full | EEEE, MMMM d, y h:mm:ss a zzzz | | shortDate | M/d/yy | | mediumDate | MMM d, y | | longDate | MMMM d, y | | fullDate | EEEE, MMMM d, y | | shortTime | h:mm a | | mediumTime | h:mm:ss a |

示例：

<div ng-app="">
  <p>原始值：{{ today }}</p>
  <p>默认格式：{{ today | date }}</p>
  <p>自定义格式：{{ today | date : "yyyy-MM-dd HH:mm:ss" }}</p>
</div>

输出结果：

原始值：2022-01-04T08:44:34.010Z
默认格式：Jan 4, 2022, 5:44:34 PM
自定义格式：2022-01-04 16:44:34
3. filter

用于过滤数组或对象，返回符合条件的项。

语法：{{ expression | filter : object : comparator }}

其中，object 为过滤条件，可以为对象、字符串或函数，comparator 为可选参数，指定是否精确匹配（默认为 false）。

示例：

<div ng-app="">
  <input type="text" ng-model="search" placeholder="请输入搜索关键字">
  <ul>
    <li ng-repeat="item in items | filter: search">{{ item }}</li>
  </ul>
</div>

输出结果：

请在输入框中输入关键字进行搜索

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Peach</li>
</ul>
4. lowercase

将字符串转换为小写字母。

语法：{{ expression | lowercase }}

示例：

<div ng-app="">
  <p>原始值：{{ text }}</p>
  <p>转换后：{{ text | lowercase }}</p>
</div>

输出结果：

原始值：Hello World!
转换后：hello world!
5. uppercase

将字符串转换为大写字母。

语法：{{ expression | uppercase }}

示例：

<div ng-app="">
  <p>原始值：{{ text }}</p>
  <p>转换后：{{ text | uppercase }}</p>
</div>

输出结果：

原始值：Hello World!
转换后：HELLO WORLD!
6. limitTo

用于限制数组或字符串的长度，返回指定数量的项。

语法：{{ expression | limitTo : limit : begin }}

其中，limit 为限制数量，begin 为可选参数，指定从哪一项开始限制（默认为 0）。

示例：

<div ng-app="">
  <p>原始值：{{ text }}</p>
  <p>限制 5 个字符后：{{ text | limitTo : 5 }}</p>
  <p>从第 6 个字符开始限制：{{ text | limitTo : 5 : 5 }}</p>
</div>

输出结果：

原始值：Hello World!
限制 5 个字符后：Hello
从第 6 个字符开始限制： World
7. number

用于格式化数字，将数值按照指定格式进行格式化。

语法：{{ expression | number : fractionSize }}

其中，fractionSize 为保留的小数位数（默认为 2）。

示例：

<div ng-app="">
  <p>原始值：{{ price }}</p>
  <p>默认格式：{{ price | number }}</p>
  <p>保留一位小数：{{ price | number : 1 }}</p>
  <p>不显示小数位：{{ price | number : 0 }}</p>
</div>

输出结果：

原始值：1000
默认格式：1,000.00
保留一位小数：1,000.0
不显示小数位：1,000
8. orderBy

用于排序数组，返回按照指定属性或表达式排序后的数组。

语法：{{ expression | orderBy : expression : reverse }}

其中，expression 为排序属性或表达式，reverse 为可选参数，指定是否反转排序（默认为 false）。

示例：

<div ng-app="">
  <select ng-model="order" ng-options="option.value as option.name for option in options">
    <option value="">请选择排序方式</option>
  </select>
  <ul>
    <li ng-repeat="item in items | orderBy: order">{{ item }}</li>
  </ul>
</div>

输出结果：

请在下拉框中选择排序方式

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
  <li>Orange</li>
  <li>Peach</li>
</ul>
自定义过滤器

除了使用内置过滤器外，也可以自定义过滤器来实现特定的需求。自定义过滤器需要使用 .filter() 方法进行定义，它接受两个参数：过滤器名称和工厂函数。工厂函数返回一个过滤器函数，它可以接受一个输入参数并返回转换后的结果。

示例：

<div ng-app="myApp">
  <input type="text" ng-model="text" placeholder="请输入待转换文本">
  <p>转换后：{{ text | reverse }}</p>
</div>

<script>
  var app = angular.module("myApp", []);
  app.filter("reverse", function() {
    return function(input) {
      return input.split("").reverse().join("");
    };
  });
</script>

输出结果：

请在输入框中输入待转换文本

转换后：

在上述代码中，我们定义了一个名为 reverse 的自定义过滤器，它接受一个输入参数，将其转换为数组并反转，最后返回反转后的字符串。在模板中，我们可以通过使用 | reverse 来调用该过滤器，并将输入值作为参数传递给它。

参考链接