W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

AngularJS 过滤器



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


AngularJS 过滤器

AngularJS 提供了转换数据的过滤器:

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

向表达式添加过滤器

过滤器可以通过一个管道字符 | 和一个过滤器添加到表达式中。

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

Example

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

<p>The name is {{ lastName | uppercase }}</p>

</div>
尝试一下 »

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

Example

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

<p>The name is {{ lastName | lowercase }}</p>

</div>
尝试一下 »

将过滤器添加到指令

过滤器可以通过一个管道字符 | 和一个过滤器添加到指令中。

Example

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 过滤器将数字格式化为货币格式:

Example

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

<h1>Price: {{ price | currency }}</h1>

</div>
尝试一下 »

阅读更多关于 currency 过滤器的知识,请阅读我们的 AngularJS currency 过滤器参考手册


filter 过滤器

filter 过滤器从数组中选择一个子集:

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

Example

返回包含字母“i”的名称:

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

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

</div>
尝试一下 »

阅读更多关于 filter 过滤器的知识,请阅读我们的 AngularJS filter 过滤器参考手册


基于用户输入过滤数组

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

在输入字段中键入一个字母,并且列表将根据匹配缩小/增长:

  • {{ x }}

Example

<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>
尝试一下 »

基于用户输入排列数组

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

Name Country
{{x.name}} {{x.country}}

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

Example

<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>
尝试一下 »

自定义过滤器

您可以通过在模块中注册新的过滤器工厂函数来制作自己的过滤器:

Example

制作一个名为 "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 = "";
        x = x.split("")
        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 过滤器将格式化每个字符为大写。