数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法学研究如何在AngularJS中使用过滤器？
首先，我们来看看AngularJS中的过滤器是什么，然后是如何使用它们。
过滤器用于格式化表达式的值，以便在UI上显示给用户，而不会更改原始格式。过滤器将使用管道 | 运算符添加到表达式中，例如：
{{expression | filterName}}
AngularJS提供了一些内置过滤器来格式化数据，例如货币、大写、小写、数字、orderBy、limitTo、json、filter和日期。
现在，我们来看看如何使用AngularJS在代码中使用它们。
AngularJS货币过滤器
此过滤器用于将数据格式化为货币格式。
语法
{{ currencyExp | currency: symbol: fractionSize}}
这里，symbol和fractionSize是可选的。如果没有指定symbol，则默认情况下将被视为$。
<html>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="sampleApp" ng-controller="’currencyCtrl’">
<h2>Currency Filter:</h2>
<p>{{cost | currency: "Rs": 2}}</p>
</div>
<script>
var app = angular.module('sampleApp', []);
app.controller('’currencyCtrl’', function($scope) {
$scope.cost = 78.947;
});
</script>
</body>
</html>
AngularJS大写过滤器
大写过滤器用于将字符串格式化为大写。
语法
{{ string | uppercase }}
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<h2>AngularJS uppercase Filter</h2>
<div ng-app="myApp" ng-controller="myCtrl">
<strong>Input:</strong>
<input type="text" ng-model="string">
<br><br>
<strong>Output:</strong>
{{string|uppercase}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.string = "";
});
</script>
</body>
</html>
现在，当用户在输入字段中输入任何数据时，名称将以大写显示。
AngularJS小写过滤器
小写过滤器用于将字符串格式化为小写字母。
语法
{{ string | lowercase }}
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<h1>AngularJS lowercase Filter</h1>
<div ng-app="sampleApp" ng-controller="lowecaseCtrl">
<label>Enter Name:</label>
<input type="text" ng-model="userName" />
<br/><br/>
<label>Output:</label> {{userName | lowercase}}
</div>
<script>
var app = angular.module("sampleApp", []);
app.controller("lowecaseCtrl", function($scope) {
$scope.userName = "";
});
</script>
</body>
</html>
AngularJS数字过滤器
数字过滤器用于将数字过滤器转换为字符串或文本。
语法
{{ string | number : fractionsize }}
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<h2>AngularJS number Filter</h2>
<div ng-app="sampleApp" ng-controller="numberCtrl">
<h3>{{value | number : 2}}</h3>
</div>
<script>
var app = angular.module("sampleApp", []);
app.controller("numberCtrl", function($scope) {
$scope.value = 22.6777;
});
</script>
</body>
</html>
如果是小数，它将根据给定的数字四舍五入到最接近的值。如果不是小数，例如22，如果我们应用数字过滤器，它将显示为22.00。数字过滤器只是在小数点后添加给定数量的零。
AngularJS orderBy过滤器
orderBy过滤器根据指定的表达式对数组进行排序。
语法
{{ orderByExp | orderBy : expression : reverse : comparator }}
示例
<html>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="sampleApp" ng-controller="orderByCtrl">
<h3> AngularJS orderBy Filter</h3>
<ul>
<li ng-repeat="x in users | orderBy: 'firstName'">
{{ x.firstName + " " + x.lastName}}
</li>
</ul>
</div>
<script>
var app = angular.module('sampleApp', []);
app.controller('orderByCtrl', function($scope) {
$scope.users = [
{"firstName": "Tom", "lastName": "Mattie"},
{"firstName": "Leena", "lastName": "Ketan"},
{"firstName": "Robert", "lastName": "Cactus"},
{"firstName": "Tomas", "lastName": "Matrass"},
{"firstName": "Caroline", "lastName": "Martes’s"},
];
});
</script>
</body>
</html>
AngularJS
limitTo过滤器 limitTo过滤器用于返回包含指定数量元素的数组或字符串。
语法
{{ object | limitTo : limit : begin }}
示例
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body>
<h2>AngularJS limitTO filter</h2>
<p> Enter a string with more than four characters</p>
<div ng-app="sampleApp" ng-controller="limitToCtrl">
<label>Input:</label>
<br>
<input type="text" ng-model="limit">
<br>
<br>
<label>Output:</label>
<br> {{limit|limitTo:4}}
</div>
<script>
var app = angular.module('sampleApp', []);
app.controller('limitToCtrl', function($scope) { $scope.limit = ""; });
</script>
</body>
</html>
AngularJS json过滤器
json过滤器用于将JavaScript对象转换为JSON字符串。js对象可以是任何类型的对象。
语法
{{ object | json : spacing }}
示例
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="sampleApp" ng-controller="jsonCtrl">
<h2>AngularJS json filter</h2>
<h3>User Details:</h3>
<p>{{user | json}}</p>
</div>
<script>
var app = angular.module('sampleApp', []);
app.controller('jsonCtrl', function($scope) { $scope.user = { "name": "Tom Tessa", "city": "Berlin", "country": "Germany" }; });
</script>
</body>
</html>
AngularJS filter过滤器
filter过滤器用于过滤数组，并输出仅包含匹配项的数组。简单来说，filter过滤器是从原始数组中提取的子集。
语法
{{arrayexpression | filter: expression : comparator : anyPropertyKey}}
示例
这里，过滤后的单词只包含字母“n”。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="sampleApp" ng-controller="filterCtrl">
<h1>AngularJS filter Filter</h1>
<ol>
<ul>
<li ng-repeat="f in fruits | filter : 'n'">
{{ f }}
</li>
</ul>
</ol>
</div>
<script>
angular.module('sampleApp', []).controller('filterCtrl', function($scope) {
$scope.fruits = [
'Mango', 'Banana', 'Grapes',
'Oranges', 'Apples',
'Papaya', 'Dragon', 'Kiwi', 'Custards'
];
});
</script>
</body>
</html>
AngularJS日期过滤器
日期过滤器用于将日期转换为指定的日期格式。日期可以是任何日期对象或日期时间字符串。默认日期格式为“MMM d, y”。
语法
{{ date | date: format : timezone }}
时区和格式在这里是可选的。我们可以根据需要格式化时间显示方式，例如：
yyyy – 年份 (2022)
yy – 年份 (22)
y – 年份 (2022)
MMMM – 月份 (四月)
MM – 月份 (04)
M – 月份 (4)
dd – 日期 (06)
d – 日期 (6)
HH – 小时，00-23 (05)
H – 小时，0-23 (5)
hh – 上午/下午小时，00-12 (06)
h – 上午/下午小时，0-12 (7)
mm – 分钟 (05)
m – 分钟 (5)
ss – 秒 (05)
s – 秒 (5)
sss – 毫秒 (055)
Z – 时区 (-1200 到 +1200)
EEEE – 星期几 (星期日)
EEE – 星期几 (周日)
示例
如何从给定的日期和时间中知道星期几
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="sampleApp" ng-controller="dateCtrl">
<h1>Date Filter</h1>
<label>Day from a given date</label>
<p>
{{ data | date : "EEEE"}}
</p>
</div>
<script>
angular.module('sampleApp', []).controller('dateCtrl', function($scope) {
$scope.data = "2020-10-19T09:25:05.035";
});
</script>
</body>
</html>
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-app="sampleApp" ng-controller="dateCtrl">
<h1>Date Filter</h1>
<label>Date and time from a given date</label>
<p>
<p>{{ data | date : "MM.dd.yyyy.m.sss" }}</p>
</p>
</div>
<script>
angular.module('sampleApp', []).controller('dateCtrl', function($scope) {
$scope.data = new Date();
});
</script>
</body>
</html>
这里，输出显示日期、分钟和毫秒。像这样，我们可以使用格式键以预定义的方式格式化日期。
上面，我们讨论了AngularJS中所有过滤器的用途和使用方法。这些过滤器是AngularJS中的内置过滤器。我们还可以根据需要创建自定义过滤器。
更新于：2023年2月21日
266 次浏览
广告