个性化阅读
专注于IT技术分析

angularjs过滤器

点击下载

本文概述

在AngularJS中,过滤器用于格式化数据。以下是用于转换数据的过滤器列表。

过滤描述
Currency它将数字格式化为货币格式。
Date它将日期格式化为指定的格式。
Filter它从数组中选择项的子集。
Json它将对象格式化为Json字符串。
Limit它用于将数组/字符串限制为指定数量的元素/字符。
Lowercase它将字符串格式化为小写。
Number它将数字格式化为字符串。
Orderby它通过表达式对数组进行排序。
Uppercase它将字符串格式化为大写。

如何向表达式添加过滤器

你可以使用竖线字符|,然后是过滤器,将过滤器添加到表达式中。

在此示例中,大写过滤器将字符串格式化为大写:

请参阅以下示例:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ firstName | uppercase }}</p>
</div>
<script>
angular.module('myApp', []).controller('personCtrl', function($scope) {
    $scope.firstName = "Sonoo", $scope.lastName = "Jaiswal"
});
</script>
</body>
</html>

让我们将小写过滤器应用于同一示例:

请参阅以下示例:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ firstName | lowercase }}</p>
</div>
<script>
angular.module('myApp', []).controller('personCtrl', function($scope) {
    $scope.firstName = "Sonoo", $scope.lastName = "Jaiswal"
});
</script>
</body>
</html>

如何将过滤器添加到指令

可以使用管道字符|将过滤器添加到指令(例如ng-repeat),然后使用过滤器。

让我们举个例子:

在此示例中,orderBy过滤器用于对数组进行排序。

请参阅以下示例:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>	
<div ng-app="myApp" ng-controller="namesCtrl">
<p>Looping with objects:</p>
<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Ramesh', country:'India'}, {name:'Alex', country:'USA'}, {name:'Pooja', country:'India'}, {name:'Mahesh', country:'India'}, {name:'Iqbal', country:'Pakistan'}, {name:'Ramanujam', country:'India'}, {name:'Osama', country:'Iraq'}, {name:'Johnson', country:'UK'}, {name:'Karl', country:'Russia'}
        ];
});
</script>
</body>
</html>

过滤器

筛选器筛选器只能在数组上使用,因为它会选择数组的一个子集。它返回仅包含匹配项的数组。

让我们举个例子:

本示例将返回包含字母“ o”的名称。

请参阅以下示例:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
  <li ng-repeat="x in names | filter : 'o'">
    {{ x }}
  </li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
'Ramesh', 'Pooja', 'Mahesh', 'Ramanujam', 'Osama', 'Iqbal', 'Karl', 'Johnson', 'Alex'
    ];
});
</script>
<p>This example displays only the names containing the letter "o".</p>
</body>
</html>

根据用户输入过滤数组

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

请参阅以下示例:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>Type a letter in the input field:</p>
<p><input type="text" ng-model="test"></p>
<ul>
  <li ng-repeat="x in names | filter:test">
    {{ x }}
  </li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        'Ramesh', 'Pooja', 'Mahesh', 'Ramanujam', 'Osama', 'Iqbal', 'Karl', 'Johnson', 'Alex'
   ];
});
</script>
<p>The list will only contain the names matching the filter.</p>
</body>
</html>

根据用户输入对数组排序

你可以根据表列对数组进行排序。

请参阅以下示例:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<p>Click the table headers to change the sorting order:</p>
<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:'Ramesh', country:'India'}, {name:'Alex', country:'USA'}, {name:'Pooja', country:'India'}, {name:'Mahesh', country:'India'}, {name:'Iqbal', country:'Pakistan'}, {name:'Ramanujam', country:'India'}, {name:'Osama', country:'Iraq'}, {name:'Johnson', country:'UK'}, {name:'Karl', country:'Russia'}
        ];

    $scope.orderByMe = function(x) {
        $scope.myOrderBy = x;
    }
});
</script>
</body>
</html>

AngularJS自定义过滤器

你可以通过在模块中注册新的过滤器工厂功能来创建自己的过滤器。

请参阅以下示例:

赞(0)
未经允许不得转载:srcmini » angularjs过滤器

评论 抢沙发

评论前必须登录!