angular的过滤器的使用

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>

angular的过滤器的使用

猜你喜欢