AngularJS 1.5自定义过滤器实现及示例：含可点击筛选代码

嘿，我来给你一步步拆解怎么在AngularJS 1.5里创建自定义过滤器，还给你准备了一个能直接运行的科目筛选示例，照着做就能快速上手！

一、自定义过滤器是什么？ #

AngularJS自带了不少内置过滤器（比如filter、orderBy），但有时候我们需要更贴合业务的过滤逻辑，这时候就可以自己创建自定义过滤器——它能帮我们按照自定义规则处理、筛选或格式化数据，灵活性拉满。

二、创建自定义过滤器的核心步骤 #

简单来说分三步：

• 1. 在你的AngularJS模块中，用filter()方法注册过滤器，参数是「过滤器名称」和一个工厂函数；
• 2. 工厂函数返回一个过滤逻辑函数，这个函数会接收要处理的数据和可选参数，最后返回处理后的结果；
• 3. 在视图里用|管道符调用过滤器，或者在控制器里通过$filter服务调用。

三、完整可运行的科目筛选示例 #

下面是一个点击科目名称实现筛选的完整示例，我们会创建一个自定义过滤器来处理科目筛选逻辑：

完整HTML代码（包含JS） #

<!DOCTYPE html>
<html ng-app="testApp">
<head>
    <title>AngularJS 1.5 自定义过滤器示例</title>
    <!-- 引入AngularJS 1.5版本的库 -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
    <style>
        .subject-btn {
            padding: 8px 15px;
            margin: 5px;
            cursor: pointer;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .subject-btn:hover {
            background-color: #e0e0e0;
        }
        .active {
            background-color: #4CAF50;
            color: white;
            border-color: #45a049;
        }
    </style>
</head>
<body ng-controller="namesCtrl">
    <h3>科目筛选器</h3>
    <!-- 科目按钮，点击设置筛选关键词 -->
    <button class="subject-btn" ng-class="{'active': selectedSubject === 'all'}" ng-click="selectedSubject = 'all'">显示全部</button>
    <button class="subject-btn" ng-repeat="subject in names" ng-class="{'active': selectedSubject === subject.name}" ng-click="selectedSubject = subject.name">
        {{ subject.name }}
    </button>

    <h4>筛选结果：</h4>
    <ul>
        <!-- 使用自定义过滤器subjectFilter进行筛选 -->
        <li ng-repeat="subject in names | subjectFilter:selectedSubject">
            {{ subject.name }}
        </li>
    </ul>

    <script>
        // 定义AngularJS模块
        angular.module('testApp', [])
        // 注册自定义过滤器：subjectFilter
        .filter('subjectFilter', function() {
            // 返回过滤逻辑函数
            return function(subjects, filterKey) {
                // 如果筛选关键词是'all'，返回所有科目
                if (filterKey === 'all') {
                    return subjects;
                }
                // 否则返回匹配的科目
                return subjects.filter(function(subject) {
                    return subject.name === filterKey;
                });
            };
        })
        // 定义控制器
        .controller('namesCtrl', function($scope) {
            // 科目数据
            $scope.names = [
                { name: 'Hindi' },
                { name: 'Math' },
                { name: 'English' },
                { name: 'Science' },
                { name: 'Computer' },
                { name: 'History' }
            ];
            // 默认显示全部
            $scope.selectedSubject = 'all';
        });
    </script>
</body>
</html>

示例说明 #

1. 自定义过滤器subjectFilter：它接收两个参数——要过滤的科目数组subjects和筛选关键词filterKey，根据关键词返回匹配的科目：
   • 如果filterKey是all，直接返回所有科目；
   • 否则筛选出名称和关键词完全匹配的科目。
2. 视图交互：点击不同的科目按钮，会更新selectedSubject的值，这个值会作为参数传递给自定义过滤器，实时更新筛选结果；
3. 样式优化：给当前选中的按钮加了高亮样式，提升交互体验。

运行效果 #

打开这个HTML文件，你会看到：

• 初始状态显示所有科目；
• 点击任意科目名称，列表就只会显示该科目；
• 点击「显示全部」按钮，列表恢复显示所有科目。

内容的提问来源于stack exchange，提问作者Arvind Mishra