angular的过滤器的使用

最新推荐文章于 2024-05-02 16:55:13 发布

原创最新推荐文章于 2024-05-02 16:55:13 发布 · 238 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

angular 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了AngularJS中常用的内置过滤器，包括货币格式化、数字格式化、大小写转换、JSON格式化、限制显示长度、日期格式化、排序及筛选等功能，并通过实例展示了这些过滤器的具体使用方法。

1、currency: 默认是$,用：“”可以传递符号参数进去,

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<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>Document</title>
  <script src="angular.min.js"></script>
</head>
<body>
  <div ng-controller="m1">

<span>{{price | currency: "￥"}}</span>

</div> <script> var m1 = angular.module('myApp', []); m1.controller('m1',['$scope', function ($scope) { $scope.price = 1548285011; }]); </script></body></html>

2、number,针对于有小数点的数字的时候，默认保留三位小数点，可以:n的方式设置要保留的小数位数是多少

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<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>Document</title>
  <script src="angular.min.js"></script>
</head>
<body>
  <div ng-controller="m1">
    <span>{{price | number: 2}}</span>
  </div>
  <script>
    var m1 = angular.module('myApp', []);
    m1.controller('m1',['$scope', function ($scope) {
      $scope.price = 1548285011.1396469;
    }]);
  </script>
</body>
<html>

3、lowercase/uppercase

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<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>Document</title>
  <script src="angular.min.js"></script>
</head>
<body>
  <div ng-controller="m1">
    <span>{{string | uppercase}}</span>
  </div>
  <script>
    var m1 = angular.module('myApp', []);
    m1.controller('m1',['$scope', function ($scope) {
      $scope.string = 'hello pomotodo';
    }]);
  </script>
</body>
<html>

4、json

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<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>Document</title>
  <script src="angular.min.js"></script>
</head>
<body>
  <div ng-controller="m1">
    <pre>{{name | json}}</pre>
  </div>
  <script>
    var m1 = angular.module('myApp', []);
    m1.controller('m1',['$scope', function ($scope) {
      $scope.name = { "name": "hello", "age": "20"};
    }]);
  </script>
</body>
</html>

5、limitTo：不局限与字符串，可以是数组等

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<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>Document</title>
  <script src="angular.min.js"></script>
</head>
<body>
  <div ng-controller="m1">
    {{name | limitTo: 2}}
  </div>
  <script>
    var m1 = angular.module('myApp', []);
    m1.controller('m1',['$scope', function ($scope) {
      $scope.name = 'hello';
    }]);
  </script>
</body>
</html>

6、date

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<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>Document</title>
  <script src="angular.min.js"></script>
</head>
<body>
  <div ng-controller="m1">
    <span>{{number | date}}</span>
  </div>
  <script>
    var m1 = angular.module('myApp', []);
    m1.controller('m1',['$scope', function ($scope) {
      $scope.number = 1322849498624;
    }]);
  </script>
</body>
<html>

7、orderBy:排序

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<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>Document</title>
  <script src="angular.min.js"></script>
</head>
<body>
  <div ng-controller="m1">
    <span>{{number | orderBy: "age" :true}}</span>加了:true 就是从大到小排序
  </div>
  <script>
    var m1 = angular.module('myApp', []);
    m1.controller('m1',['$scope', function ($scope) {
      $scope.number = [
        {"color": "blue", age: "20"},
        {"color": "red", age: "40"},
        {"color": "green", age: "30"},
        {"color": "yellow", age: "10"}
      ];
    }]);
  </script>
</body>
<html>

8、filter

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<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>Document</title>
  <script src="angular.min.js"></script>
</head>
<body>
  <div ng-controller="m1">
    <span>{{number | filter: "green"}}</span>//针对数据中的value值，对于key值是不起作用的，后面还可以加:true
  </div>
  <script>
    var m1 = angular.module('myApp', []);
    m1.controller('m1',['$scope', function ($scope) {
      $scope.number = [
        {"color": "blue", age: "20"},
        {"color": "red", age: "40"},
        {"color": "green", age: "30"},
        {"color": "yellow", age: "10"}
      ];
    }]);
  </script>
</body>
<html>