如何在AngularJS中使用单选按钮制作自定义过滤器

How to make a custom filter with radio buttons in AngularJS

本文关键字:单选按钮 自定义 过滤器 AngularJS      更新时间:2023-09-26

我有多个radio按钮,我希望根据所选的radio按钮过滤来自web API的结果。

HTML

<div class="row">
    <div class="small-8 medium-9 large-10 columns">
        <ul class="no-bullet">
            <li data-ng-repeat="course in courses">
                <a href="#/CoursesWillStart/{{ course.ID }}">{{ course.CourseName }}</a>
            </li>
        </ul>
    </div>
    <div class="small-4 medium-3 large-2 columns">
        <ul class="no-bullet">
            <li>
                <label><input type="radio" name="filterRadio" value="RadioAll" data-ng-model="filterRadio"  /> All</label>
            </li>
            <li>
                <label><input type="radio" name="filterRadio" value="RadioToday" data-ng-model="filterRadio" /> Today</label>
            </li>
            <li>
                <label><input type="radio" name="filterRadio" value="RadioThisWeek" data-ng-model="filterRadio" /> This Week</label>
            </li>
            <li>
                <label><input type="radio" name="filterRadio" value="RadioThisMonth" data-ng-model="filterRadio" /> This Month</label>
            </li>
            <li>
                <label><input type="radio" name="filterRadio" value="RadioSpecificDate" data-ng-model="filterRadio" /> Specific Date
                    <input type="date" name="from" data-ng-model="from" data-ng-show="filterRadio == 'RadioSpecificDate'" />
                    <input type="date" name="to" data-ng-model="to" data-ng-show="filterRadio == 'RadioSpecificDate'" />
                </label>
            </li>
            <li>
                 <button class="my-button" data-ng-click="filterCourses(filterRadio)">Search</button>
            </li>
        </ul>
    </div>
</div>

Javascript(相关)

myApp.controller('CoursesWillStartCtrl', ['$scope', 'GetCoursesWillStart',
function ($scope, GetCoursesWillStart) {
    $scope.filterRadio = 'RadioAll';
    $scope.filterCourses = function (filterRadio) {
        switch (filterRadio) {
            case 'RadioToday':
                $scope.courses = coursesStartToday();
                break;
            case 'RadioThisWeek':
                $scope.courses = coursesThisWeek();
                break;
            case 'RadioThisMonth':
                $scope.courses = coursesThisMonth();
                break;
            case 'RadioSpecificDate':
                $scope.courses = coursesInSpecificDate($scope.from, $scope.to);
                break;
            default:    //all
                $scope.courses = GetCoursesWillStart.query();
                break;
        }
    };
    $scope.filterCourses($scope.filterRadio);
}
]);

这是我在Angular中的第一个web应用程序,上面的代码正在工作,但我不想操作$scope.courses,这样用户就不必在每次过滤后获得所有课程,也不必过度使用web API。

我想我应该做一个自定义过滤器。我看过这个教程,但我不知道如何满足我的要求。那么,有人能告诉我如何制作自定义过滤器吗?或者是否有更好的方法来进行过滤?

我发现这个非常有用的链接描述了关于过滤器的一切。我的问题是,我无法读取视图过滤器的值。

但Angular负责处理这个问题,就像这个一样

course in courses | filterByDate:filterRadio

现在我将filterRadio发送到过滤器函数作为参数

angular.module('myAppFilters', []).filter('filterByDate',
function () {
    return function (courses, filterRadio) {
         //Also, I removed the switch from controller and added it here    
    }
});

此外,我们可以从视图发送多个参数,如下所示:

course in courses | filterByDate:filterRadio:from:to

Angular中的一个重要功能是别名命名:

course in courses | filterByDate:filterRadio:from:to as coursesFiltered

现在我们可以得到它的长度,如coursesFiltered.length