vi
new
-1
Avatar
ngocyen @ngocyen
3.9K 116 57
Đã đăng vào thg 10 25, 2015 6:13 CH 3 phút đọc
350

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
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>

###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>

###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 **

AngularJS

All rights reserved

Mục lục


Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí