如何在AngularJS中使用單選按鈕創建自定義過濾器

Question

我有多個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 ，這樣用戶不必在每次過濾后都獲得所有課程，也不必過度使用網絡API。

我想我應該做一個自定義過濾器。 我看過本教程 ，但是我不知道如何滿足我的要求。 因此，有人可以告訴我如何制作自定義過濾器-或是否有更好的方法進行過濾？

Answer 1

我發現這個非常有用的鏈接描述了有關過濾器的所有內容。 我的問題是我無法從視圖讀取值到過濾器 。

但是Angular會像這樣

course in courses | filterByDate:filterRadio

現在我將filterRadio發送給filter函數作為參數

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