AngularJS 过滤器学习笔记

什么是过滤器？

在AngularJS中，过滤器用于格式化显示数据。它可以用于格式化文本、日期、数字等等。过滤器使用管道符（|）来添加到AngularJS表达式中。

内置过滤器

AngularJS提供了一些内置的过滤器，包括：

• currency: 格式化为货币表示形式
• date: 格式化为日期表示形式
• filter: 过滤数组中的元素
• lowercase: 转换为小写形式
• uppercase: 转换为大写形式
• limitTo: 限制在一个特定范围内
• orderBy: 根据某个属性排序
• json: 格式化为JSON格式

实例

使用currency过滤器

htmlCopy Code
<p>{{ price | currency }}</p>

这将把price变量转换为货币格式。例如，如果price的值为1000，则在美国区域设置下将显示$1,000.00。

使用date过滤器

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

这将把date变量转换为YYYY-MM-DD格式的日期字符串。

使用filter过滤器

htmlCopy Code
<div ng-repeat="item in items | filter:searchText">
  <p>{{ item.name }}</p>
</div>

这将从items数组中过滤出符合searchText文本过滤条件的元素，并将它们显示在页面上。

使用limitTo过滤器

htmlCopy Code
<div ng-repeat="item in items | limitTo:3">
  <p>{{ item.name }}</p>
</div>

这将限制ng-repeat指令只显示3个元素。

使用orderBy过滤器

htmlCopy Code
<div ng-repeat="item in items | orderBy:'name'">
  <p>{{ item.name }}</p>
</div>

这将按照item对象的name属性对items数组进行排序，并将它们显示在页面上。

使用json过滤器

htmlCopy Code
<p>{{ data | json }}</p>

这将把data对象转换为JSON格式的字符串并展示在页面上。