如何使用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