Hướng dẫn và ví dụ AngularJS Filter
Xem thêm các chuyên mục:

Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.


{{ expression [| filter_name[:parameter_value] ... ] }}
Filter | Mô tả |
lowercase | Định dạng một chuỗi (string) thành chữ thường. |
uppercase | Định dạng một chuỗi (string) thành chữ hoa. |
number | Định dạng một số (number) thành chuỗi. |
currency | Định dạng một số thành một định dạng tiền tệ. |
date | Định dạng một ngày tháng (date) thành một định dạng cụ thể. |
json | Định dạng một đối tượng (object) thành chuỗi JSON. |
filter | Lựa chọn một tập con (subset) của các phần tử trong một mảng. |
limitTo | Giới hạn một mảng (Hoặc một chuỗi), trả về một mảng mới (hoặc chuỗi mới) có số phần tử (Hoặc số ký tự) như mong muốn. |
orderBy | Xắp thứ tự một mảng bởi một biểu thức. |
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.greeting = "Hello World";
});
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Filters</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<script src="upperlowercase-example.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h3>Filters: uppercase/lowercase</h3>
<p>Origin String: {{ greeting }}</p>
<p>Uppercase: {{ greeting | uppercase }}</p>
<p>Lowercase: {{ greeting | lowercase }}</p>
</div>
</body>
</html>

<!-- fractionSize: Optional -->
{{ number_expression | number : fractionSize }}
// fractionSize: Optional
$filter('number')( aNumber , fractionSize )
Tham số | Kiểu | Mô tả |
---|---|---|
aNumber |
number
string |
Một số để định dạng. |
fractionSize
(Tùy chọn)
|
number string |
Số vị trí cho phần thập phân (decimal). Nếu bạn không cung cấp giá trị cho tham số này, giá trị của nó tùy thuộc vào locale. Trong trường hợp locale mặc định giá trị của nó sẽ là 3. |
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Filters</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<script src="number-example.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h3>Filter: number</h3>
<p><b>Origin Number:</b> {{ revenueAmount }}</p>
<p><b>Default Number Format:</b> {{ revenueAmount | number }}</p>
<p><b>Format with 2 decimal places:</b> {{ revenueAmount | number : 2 }}</p>
</div>
</body>
</html>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.revenueAmount = 20011.2345;
});

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $filter) {
var aNumber = 19001.2345;
// Use number filter in Javascript:
$scope.revenueAmountStr = $filter("number")(aNumber, 2);// ==> 19,001.23
});
{{ amount | currency : symbol : fractionSize}}
$filter('currency')(amount, symbol, fractionSize)
Tham số | Kiểu | Mô tả |
---|---|---|
amount | number |
Một con số. |
symbol
(optional)
|
string |
Ký hiệu (symbol) tiền tệ, hoặc gì đó tương đương để hiển thị. |
fractionSize
(optional)
|
number |
Số vị trí cho phần thập phân (decimal). Nếu không được cung cấp giá trị của nó sẽ là mặc định theo locale hiện thời của trình duyệt. |
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.myAmount = 12345.678;
});
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Filters</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<script src="currency-example.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h3>Filter: currency</h3>
Enter Amount:
<input type="number" ng-model="myAmount" />
<p>
<b ng-non-bindable>{{ myAmount | currency }}</b>:
<span>{{ myAmount | currency }}</span>
</p>
<p>
<b ng-non-bindable>{{ myAmount | currency : '$' : 2 }}</b>:
<span>{{ myAmount | currency : '$' : 2 }}</span>
</p>
<p>
<b ng-non-bindable>{{ myAmount | currency : '€' : 1 }}</b>:
<span>{{ myAmount | currency : '€' : 1 }}</span>
</p>
</div>
</body>
</html>
Tra cứu các thư viện locale của AngularJS:
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.myAmount = 12345.678;
});
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Filters</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<!-- Use locale_de-de -->
<!-- https://cdnjs.com/libraries/angular-i18n -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.7.4/angular-locale_de-de.js"></script>
<script src="currency-locale-example.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h3>Filter: currency (LOCALE: de-de)</h3>
Enter Amount:
<input type="number" ng-model="myAmount" />
<p>
<b ng-non-bindable>{{ myAmount | currency }}</b>:
<span>{{ myAmount | currency }}</span>
</p>
<p>
<b ng-non-bindable>{{ myAmount | currency : '$' : 2 }}</b>:
<span>{{ myAmount | currency : '$' : 2 }}</span>
</p>
<p>
<b ng-non-bindable>{{ myAmount | currency : '€' : 1 }}</b>:
<span>{{ myAmount | currency : '€' : 1 }}</span>
</p>
</div>
</body>
</html>
{{ date_expression | aDate : format : timezone}}
$filter('date')(aDate, format, timezone)
-
TODO
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.myDate = new Date();
});
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Filters</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<script src="date-example.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h3>Filter: date</h3>
<p>
<!-- $scope.myDate = new Date() -->
<b ng-non-bindable>{{ myDate | date: 'yyyy-MM-dd HH:mm'}}</b>:
<span>{{ myDate | date: 'yyyy-MM-dd HH:mm'}}</span>
</p>
<p>
<b ng-non-bindable>{{1288323623006 | date:'medium'}}</b>:
<span>{{1288323623006 | date:'medium'}}</span>
</p>
<p>
<b ng-non-bindable>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</b>:
<span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span>
</p>
<p>
<b ng-non-bindable>{{1288323623006 | date:'MM/dd/yyyy @ h:mma'}}</b>:
<span>{{'1288323623006' | date:'MM/dd/yyyy @ h:mma'}}</span>
</p>
<p>
<b ng-non-bindable>{{1288323623006 | date:"MM/dd/yyyy 'at' h:mma"}}</b>:
<span>{{'1288323623006' | date:"MM/dd/yyyy 'at' h:mma"}}</span>
</p>
</div>
</body>
</html>
{{ json_expression | json : spacing}}
$filter('json')(object, spacing)
Tham số | Kiểu | Mô tả |
---|---|---|
object | * |
Một đối tượng JavaScript bất kỳ (bao gồm mảng và các kiểu nguyên thủy (primitive) ) |
spacing
(optional)
|
number |
Số khoảng trắng được sử dụng cho mỗi thụt lề (indentation), mặc định là 2. |
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.department = {
id : 1,
name: "Sales",
employees : [
{id: 1, fullName: "Tom", gender: "Male"},
{id: 2, fullName: "Jerry", gender: "Male"}
]
};
});
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Filters</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<script src="json-example.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h3>Filter: json</h3>
<p>
<b ng-non-bindable>{{ department | json : 5 }}</b>:
<pre>{{ department | json : 5}}</pre>
</p>
<p>
<b ng-non-bindable>{{ department | json }}</b>:
<pre>{{ department | json }}</pre>
</p>
</div>
</body>
</html>
- limitTo được sử dụng cho một mảng để trả về một mảng mới bao gồm các phần tử đầu tiên của mảng đó. Hoặc trả về một mảng mới bao gồm các phần tử ở cuối của mảng ban đầu.
- limitTo được sử dụng cho một chuỗi để trả về một chuỗi mới bao gồm các ký tự đầu tiên của chuỗi đó. Hoặc trả về một chuỗi mới bao gồm các ký tự cuối cùng của chuỗi ban đầu.
- litmitTo được sử dụng cho một số để trả về một số mới bao gồm các chữ số (digit) đầu tiên của số đó. Hoặc trả về một số mới bao gồm các chữ số (digit) cuối của số ban đầu.

{{ input | limitTo : limit : begin}}
$filter('limitTo')(input, limitLength, startIndex)
Tham số | Kiểu | Mô tả |
---|---|---|
input | Array ArrayLike string number |
Một tham số đầu vào, có thể là một mảng, một chuỗi, hoặc một số. |
limitLength | string number |
Nếu input là một mảng. Nếu limitLength >=0 nghĩa là mảng mới gồm các phần tử đầu tiên của mảng ban đầu, ngược lại mảng mới bao gồm các phần tử ở cuối của mảng ban đầu. Số phần tử của mảng mới là limitLength (hoặc nhỏ hơn nếu số phần tử của mảng ban đầu không đủ). |
startIndex
(optional)
|
string number |
Ví trí bắt đầu để tìm các phần tử cho mảng mới. Nếu startIndex >=0 nghĩa là vị trí bắt đầu tính từ đầu mảng. Ngược lại nghĩa là vị trí bắt đầu tính từ cuối của mảng. |
var app = angular.module("myApp", [ ]);
app.controller("myCtrl", function($scope) {
$scope.anArray = [1,2,3,4,5,6,7,8,9];
$scope.aString = "ABCDEFGHIJK";
$scope.aNumber = 12345678;
$scope.arrayLimit = 3;
$scope.stringLimit = 3;
$scope.numberLimit = 3;
});
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Filters</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<script src="limitTo-example.js"></script>
<style>
p {color: blue;}
</style>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h3>Filter: limitTo</h3>
<p>
Limit {{anArray}} to:
<input type="number" step="1" ng-model="arrayLimit">
</p>
<b>Output Array: {{ anArray | limitTo: arrayLimit }}</b>
<p>
Limit {{aString}} to:
<input type="number" step="1" ng-model="stringLimit">
</p>
<b>Output String: {{ aString | limitTo: stringLimit }}</b>
<p>
Limit {{aNumber}} to:
<input type="number" step="1" ng-model="numberLimit">
</p>
<b>Output Number: {{ aNumber | limitTo: numberLimit }}</b>
</div>
</body>
</html>
{{ inputArray | filter : expression : comparator : anyPropertyKey}}
$filter('filter')(inputArray, expression, comparator, anyPropertyKey)