菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

AngularJS Filters


可以在 AngularJS 中添加过滤器来格式化数据。


AngularJS Filters

AngularJS 提供过滤器来转换数据

  • currency 将数字格式化为货币格式。
  • date 将日期格式化为指定格式。
  • filter 从数组中选择一个子集。
  • json 将对象格式化为 JSON 字符串。
  • limitTo 将数组/字符串限制为指定数量的元素/字符。
  • lowercase 将字符串格式化为小写。
  • number 将数字格式化为字符串。
  • orderBy 按表达式对数组进行排序。
  • uppercase 将字符串格式化为大写。

向表达式添加过滤器

可以通过使用管道字符 |,后跟过滤器,将过滤器添加到表达式中。

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

示例

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

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

</div>
自己动手试一试 »

lowercase 过滤器将字符串格式化为小写

示例

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

<p>姓名是 {{ lastName | lowercase }}</p>

</div>
自己动手试一试 »


向指令添加过滤器

通过使用管道字符 |,后跟过滤器,将过滤器添加到指令(如 ng-repeat)中

示例

orderBy 过滤器对数组进行排序

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

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

</div>
自己动手试一试 »

currency 过滤器

currency 过滤器将数字格式化为货币

示例

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

<h1>价格: {{ price | currency }}</h1>

</div>
自己动手试一试 »

在我们的 AngularJS currency Filter Reference 中了解有关 currency 过滤器的更多信息


filter 过滤器

filter 过滤器选择数组的子集。

filter 过滤器只能用于数组,它返回一个只包含匹配项的数组。

示例

返回包含字母 "i" 的姓名

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

<ul>
  <li ng-repeat="x in names | filter : 'i'">
    {{ x }}
  </li>
</ul>

</div>
自己动手试一试 »

在我们的 AngularJS filter Filter Reference 中了解有关 filter 过滤器的更多信息


根据用户输入过滤数组

通过在输入字段上设置 ng-model 指令,我们可以将输入字段的值用作过滤器的表达式。

在输入字段中键入字母,列表将根据匹配项缩小/增长

  • {{ x }}

示例

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

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

<ul>
  <li ng-repeat="x in names | filter : test">
    {{ x }}
  </li>
</ul>

</div>
自己动手试一试 »

根据用户输入对数组进行排序

单击表头以更改排序顺序:

名称 Country
{{x.name}} {{x.country}}

通过在表头上添加 ng-click 指令,我们可以运行一个函数来更改数组的排序顺序

示例

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

<table border="1" width="100%">
  <tr>
    <th ng-click="orderByMe('name')">Name</th>
    <th ng-click="orderByMe('country')">Country</th>
  </tr>
  <tr ng-repeat="x in names | orderBy:myOrderBy">
    <td>{{x.name}}</td>
    <td>{{x.country}}</td>
  </tr>
</table>

</div>

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
  $scope.names = [
    {name:'Jani',country:'Norway'},
    {name:'Carl',country:'Sweden'},
    {name:'Margareth',country:'England'},
    {name:'Hege',country:'Norway'},
    {name:'Joe',country:'Denmark'},
    {name:'Gustav',country:'Sweden'},
    {name:'Birgit',country:'Denmark'},
    {name:'Mary',country:'England'},
    {name:'Kai',country:'Norway'}
  ];
  $scope.orderByMe = function(x) {
    $scope.myOrderBy = x;
  }
});
</script>
自己动手试一试 »

自定义过滤器

您可以通过向模块注册一个新的过滤器工厂函数来创建自己的过滤器

示例

创建一个名为 "myFormat" 的自定义过滤器

<ul ng-app="myApp" ng-controller="namesCtrl">
  <li ng-repeat="x in names">
    {{x | myFormat}}
  </li>
</ul>

<script>
var app = angular.module('myApp', []);
app.filter('myFormat', function() {
  return function(x) {
    var i, c, txt = "";
    for (i = 0; i < x.length; i++) {
      c = x[i];
      if (i % 2 == 0) {
        c = c.toUpperCase();
      }
      txt += c;
    }
    return txt;
  };
});
app.controller('namesCtrl', function($scope) {
  $scope.names = ['Jani', 'Carl', 'Margareth', 'Hege', 'Joe', 'Gustav', 'Birgit', 'Mary', 'Kai'];
});
</script>
自己动手试一试 »

myFormat 过滤器将把每隔一个字符转换为大写。



×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持