如何使用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); 
} 
]); 

這是我的角度第一web應用，以及上面的代碼工作，但我不想要操作$scope.courses，以便用戶不必在每次過濾後都獲得所有課程，並且不要過度使用Web API。

我想我應該做一個自定義過濾器。我看到這tutorial，但我不知道如何爲我的要求。那麼有人可以告訴我如何製作自定義過濾器 - 或者如果有更好的方法 - 做過濾？

Answer 1

我發現這個非常有用link描述了有關過濾器的一切。我的問題是，我無法從查看到過濾器讀取數值。

但角照顧到這一點，就這樣

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 

此外，在角的一個重要特徵是別名命名：

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

現在，我們可以得到它的長度是這樣coursesFiltered.length