資料結構
網路
關係資料庫管理系統 (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.com/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.com/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.com/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.com/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.com/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.com/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.com/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.com/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.com/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.com/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 次瀏覽
廣告