Chương 4-Bài 6. Cách sử dụng AngularJS Filter
Tác giả: Dương Nguyễn Phú Cường
Ngày đăng:
21/2/2025, 18:27
Lượt xem: 391
Filters can be added in AngularJS to format data.
AngularJS Filters
AngularJS provides filters to transform data:currencyFormat a number to a currency format.dateFormat a date to a specified format.filterSelect a subset of items from an array.jsonFormat an object to a JSON string.limitToLimits an array/string, into a specified number of elements/characters.lowercaseFormat a string to lower case.numberFormat a number to a string.orderByOrders an array by an expression.uppercaseFormat a string to upper case.
Adding Filters to Expressions
Filters can be added to expressions by using the pipe character|, followed by a filter.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ví dụ đầu tiên AngularJS</title>
<!-- Include thư viện Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<!-- Include script angularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body ng-app="sunshineApp">
<div class="container">
<div class="row">
<div class="col-md-6" ng-controller="khachhangController">
<div class="panel panel-primary">
<div class="panel-heading">Thông tin khách hàng</div>
<div class="panel-body">
Nhập họ: <input type="text" ng-model="ho"><br>
Nhập tên: <input type="text" ng-model="ten"><br>
<br>
Tên đầy đủ của bạn: {{ fullName() | uppercase }}
</div>
</div>
</div>
<div class="col-md-6" ng-controller="sanphamController">
<div class="panel panel-info">
<div class="panel-heading">Danh sách sản phẩm</div>
<div class="panel-body">
Gõ từ khóa tìm kiếm: <input type="text" ng-model="tukhoatimkiem">
<ul>
<li ng-repeat="x in danhsachsanpham | filter:tukhoatimkiem">
{{ x.tensanpham + ', ' + x.loai + ': ' }} {{ x.gia | currency }}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script>
// Khởi tạo ứng dụng angularJS
var app = angular.module('sunshineApp', []);
// Khai báo controller `khachhangController`
app.controller('khachhangController', function ($scope) {
$scope.ho = "Dương Nguyễn Phú";
$scope.ten = "Cường";
$scope.fullName = function () {
return $scope.ho + " " + $scope.ten;
};
});
// Khai báo controller `sanphamController`
app.controller('sanphamController', function ($scope) {
$scope.danhsachsanpham = [{
tensanpham: 'hoa lan',
loai: 'hoa tiệc cưới',
gia: 5000
},
{
tensanpham: 'hoa hồng',
loai: 'hoa tình yêu',
gia: 2000
},
{
tensanpham: 'hoa tươi',
loai: 'hoa văn phòng',
gia: 3000
}
];
});
</script>
</body>
</html>
Ủng hộ tác giả
Bình luận
Bình luận của bạnNền tảng các kiến thức học tập
Cùng nhau học tập, khám phá các kiến thức nền tảng về Lập trình web, mobile, database nhé.
Nền tảng kiến thức - Hành trang tới tương lai hân hạnh phục vụ Quý khách!
Khám phá, trải nghiệm ngay
Vui lòng đăng nhập để gởi bình luận!
Đăng nhậpChưa có bình luận nào!