AngularJS过滤器filter用法总结

什么是AngularJS过滤器filter

AngularJS过滤器filter是AngularJS框架中一项非常重要的组成部分，用于对数据进行快速过滤和转换。它可以在视图层轻松地过滤、排序和格式化数据，而不用去改变controllers或services。

如何使用AngularJS过滤器filter

使用AngularJS过滤器filter，需要在你的HTML模板中临时添加过滤器管道符号( | ), 其中的管道符号将数据的源数据导向filter中进行处理。过滤器有一个非常好的特性，就是可以串联多个过滤器，使过滤器管道更加灵活。

下面是使用filter的基本模板：

{{expression | filter1 | filter2 | ... }}

AngularJS常见过滤器filter示例

currency （货币格式过滤器）

将数字转为货币格式，根据设置不同的参数可进行数字舍入和符号更改。

<!DOCTYPE html>
<html>
<head>
    <title>currencyFilter</title>
    <script src="//cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
    <h1>currency filter</h1>
    <div ng-controller="currencyController">
        <p>{{ money | currency }}</p>  <!-- output: $123.46 -->
    </div>
    <script>
        var app = angular.module('myApp',[]);
        app.controller('currencyController',function($scope){
            $scope.money = 123.4567;
        });
    </script>
</body>
</html>

filter （数组过滤器）

当我们需要从一个数组中筛选出符合条件的元素时，filter就是解决方案。只要按照数组中的每个元素，返回true或false的逻辑来定义这个过滤器即可。

<!DOCTYPE html>
<html>
<head>
    <title>filterFilter</title>
    <script src="//cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
    <h1>filter filter</h1>
    <div ng-controller="filterController">
        <ul>
            <li ng-repeat="fruit in fruits | filter:goodFruits">{{fruit}}</li> <!-- 筛选水果的好坏 -->
        </ul>
    </div>
    <script>
        var app = angular.module('myApp',[]);
        app.controller('filterController',function($scope){
            $scope.fruits = ['apple', 'banana', 'orange', 'kiwi', 'pear', 'peach'];
            $scope.goodFruits = function(fruit){
                return fruit === 'banana' || fruit === 'pear' || fruit === 'peach';
            };
        });
    </script>
</body>
</html>

注意：$scope.goodFruits函数返回值为true，则将筛选出来，否则不显示。

总结

AngularJS过滤器filter在AngularJS框架中使用非常广泛，它是对数据进行快速过滤和转换的好工具。本文介绍了AngularJS常用的货币格式过滤器和数组过滤器两种，供读者参考。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：AngularJS过滤器filter用法总结 - Python技术站

AngularJS过滤器filter用法总结

AngularJS过滤器filter用法总结

什么是AngularJS过滤器filter

如何使用AngularJS过滤器filter

AngularJS常见过滤器filter示例

总结

相关文章