AngularJs的过滤器

最新推荐文章于 2025-08-10 14:00:41 发布

转载最新推荐文章于 2025-08-10 14:00:41 发布 · 235 阅读

AngularJS 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了 Angular 中几种常用过滤器的功能与使用方法，包括货币格式化、子集选取、大小写转换及数组排序等，展示了如何利用这些过滤器增强应用的表现力。

所谓过滤器就是过滤得到自己想要的数据

currency	格式化数字为货币格式。
filter	从数组项中选择一个子集。
lowercase	格式化字符串为小写。
orderBy	根据某个表达式排列数组。
uppercase	格式化字符串为大写。

uppercase 过滤器将字符串格式化为大写：

<div ng-app="myApp" ng-controller="personCtrl">

<p>姓名为 {{ lastName | uppercase }}</p>

</div>

orderBy 过滤器根据表达式排列数组：

<div ng-app="myApp" ng-controller="namesCtrl">

<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

filter 过滤器从数组中选择一个子集：这个是可以用多个过滤器的这过滤器是只显示和输入内容相关的数据

<div ng-app="myApp" ng-controller="namesCtrl">

<p><input type="text" ng-model="test"></p>

<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>

</div>