tìm hiểu về angularjs( p 2)- filter
1. Bộ Lọc (Filters) AngularJS Bộ Lọc (filters) trong AngularJS có thể được dùng để biến đổi dữ liệu: Bộ Lọc Mô tả currency Định dạng một số thành định dạng tiền tệ filter Chọn một tập hợp con của các mục từ một mảng lowercase Định dạng một chuỗi thành chữ viết thường ...
1. Bộ Lọc (Filters) AngularJS
- Bộ Lọc (filters) trong AngularJS có thể được dùng để biến đổi dữ liệu:
| Bộ Lọc | Mô tả |
|---|---|
| currency | Định dạng một số thành định dạng tiền tệ |
| filter | Chọn một tập hợp con của các mục từ một mảng |
| lowercase | Định dạng một chuỗi thành chữ viết thường |
| orderBy | Xắp sếp một mảng bằng một biểu thức |
| uppercase | Định dạng một chuỗi thành chữ viết hoa |
| date | định dạng ngày tháng |
| limitTo | Giới hạn độ dài chuỗi hoặc mảng |
| json | chuyển đổi 1 đối tượng javascript vào json, bộ lọc sử dụng cho việc gỡ lỗi |
2. Cú pháp
- cú pháp cơ bản như sau:
- {{ expression | filter }}
-
Nhiều Filter trong biểu thức:
- {{ expression | filter1 | filter2 | filter3 }}
-
filter với đối số:
- {{ expression | filter:argument1:argument2:.. }}
3. Filter-Uppercase
- định dạng chuỗi thành chữ Hoa
{{ string | uppercase }}
- xem đoạn code html sau:
<body> <div ng-app="myapp"> {{message | uppercase}} </div> <script>> angular.module("myapp", []) .run(function($rootScope) { $rootScope.message= "hello framgia"; }); </script> </body>
ở đoạn code này kết quả trả về : HELLO FRAMGIA => filter| uppercase đã chuyển đoạn xâu thành chữ Hoa
Bạn có thể xem demo ở link này :http://jsfiddle.net/nukRe/307/
###4. Filter-lowercase
-
định dạng chuỗi thành chữ Thường {{ string | lowercase }}
-
xem đoạn code html sau:
<body> <div ng-app="myapp"> {{message | lowercase}} </div> <script>> angular.module("myapp", []) .run(function($rootScope) { $rootScope.message= "Hello Framgia"; }); </script> </body>
Hiện lên màn hình của đoạn code này là: hello framgia => đã chuyển từ chữ Hello Framgia => filter|lowercase : chuyển xâu thành chữ thường
Bạn có thể xem demo ở link này :http://jsfiddle.net/nukRe/308/
5. Filter-currency
- Bộ lọc currency định dạng một chuỗi như là định dạng tiền tệ
{{ currency_expression | currency : symbol : fractionSize}}
- xem đoạn code html sau:
<div ng-app="myapp" ng-controller="mycontroller">
<input type="number" ng-model="amount" aria-label="amount"> <br>
default currency symbol ($): <span id="currency-default">{{amount | currency}}</span><br>
custom currency identifier (USD$): <span id="currency-custom">{{amount | currency:"USD$"}}</span><br>
no fractions (0): <span id="currency-no-fractions">{{amount | currency:"USD$":0}}</span>
</div>
<script>
angular.module('myapp', [])
.controller('mycontroller', ['$scope', function($scope) {
$scope.amount = 10;
}]);
</script>
- Bạn có thể xem demo ở link này : http://jsfiddle.net/nukRe/315/
###6. Filter- limitTo
-
limitTo Giới hạn độ dài chuỗi hoặc mảng
-
Tạo ra một mảng mới hoặc chuỗi chỉ chứa một số quy định. Các yếu tố này được lấy từ một trong hai đầu hoặc cuối của mảng, chuỗi hoặc số, quy định giới hạn giá trị và dấu . Nếu một số được sử dụng như là đầu vào, nó sẽ được chuyển đổi thành một chuỗi.
-
cấu trúc : {{ limitTo_expression | limitTo : limit : begin}}
-
xem đoạn code sau:
<div ng-app="myapp" ng-controller="mycontroller"> {{ 'framgia to the world' | limitTo:7}} <br> {{ 'framgia to the world' | limitTo:-5}} </div> <script> angular.module('myapp', []) .controller('mycontroller',function($scope) { }); </script>
các bạn có thể xem demo về limitTo ở link sau : http://jsfiddle.net/nukRe/311/
7. Filter- orderBy
-
sắp xếp các phần tử trong mảng theo thứ tự
-
cấu trúc :
{{ orderBy_expression | orderBy : expression : reverse}}
- xem đoạn code sau :
<div ng-app="myapp" ng-controller="mycontroller">
<table class="friend">
<tr>
<th>Name</th>
<th>Phone</th>
<th>Age</th>
</tr>
<tr ng-repeat="friend in friends | orderBy:'age'">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<td>{{friend.age}}</td>
</tr>
</table>
</div>
<script>
angular.module('myapp', [])
.controller('mycontroller', ['$scope', function($scope) {
$scope.friends =
[{name:'John', phone:'555-1212', age:10},
{name:'Mary', phone:'555-9876', age:19},
{name:'Mike', phone:'555-4321', age:21},
{name:'Adam', phone:'555-5678', age:35},
{name:'Julie', phone:'555-8765', age:29}];
}]);
</script>
- Xem demo ở link sau http://jsfiddle.net/nukRe/312/ ; http://jsfiddle.net/nukRe/314/
###8. Filter
-
Chọn một tập hợp con từ các mảng và trả về một mảng mới.
-
cấu trúc :
{{ filter_expression | filter : expression : comparator}}
- xem đoạn code sau về filter
<div ng-app="myapp" ng-controller="mycontroller"> <ul ng-init="friends=[ {name: 'yen', job: 'design'}, {name: 'hung', job: 'deverlop'} ]"> <li ng-repeat="friend in friends | filter:filterKey"> {{friend.name}} like {{friend.job}}</li> </ul> search: <input ng-model="filterKey"> </div> <script> angular.module('myapp', []) .controller('mycontroller',function($scope) { }); </script>
xem demo tại đây : http://jsfiddle.net/nukRe/313/
**9. kết luận **
-
Bài này mình đã giới thiệu qua cho các bạn về filter cấu trúc và cách sử dụng nó và có cả demo cho từng filter. Các bạn có thể tham khảo qua cách viết của mình hoặc qua các link về angularjs sau :
- http://www.w3schools.com/angular/angular_filters.asp
- https://docs.angularjs.org/api/ng/filter/filter
- https://docs.angularjs.org/guide/filter
- https://viblo.asia/Giangnv/posts/AeJ1vOo3vkby
- http://sangplus.com/filter-trong-angularjs-huong-dan-filter-toan-tap.html
-
Hoặc qua các video sau :
- <iframe awidth="100%" height="400" src="https://www.youtube.com/embed/ZAMlr4RAI8M" frameborder="0" allowfullscreen></iframe>
-
Cảm ơn các bạn đã đọc về bài viết này của mình rất vui lòng các bạn có thể cho thêm mình đánh giá về bài viết. Bài viết sau mình sẽ giới thiệu cho các bạn về directive trong anglarjs. Thân ái và hẹn gặp lại
