[英]How to make a custom filter with radio buttons in AngularJS
I have multiple radio
buttons, and I want to filter results coming from web API depending on the selected radio
button. 我有多个
radio
按钮,我想根据选定的radio
按钮过滤来自Web API的结果。
HTML 的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 (relevant) 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);
}
]);
This is my first web application in Angular, and the above code is working, but I don't want to manipulate $scope.courses
, so that the user don't have to get all courses after each filtering, and don't overuse the web API. 这是我在Angular中的第一个Web应用程序,上面的代码可以正常工作,但是我不想操纵
$scope.courses
,这样用户不必在每次过滤后都获得所有课程,也不必过度使用网络API。
I think I should make a custom filter. 我想我应该做一个自定义过滤器。 I saw this tutorial , but I don't know how to make it for my requirements.
我看过本教程 ,但是我不知道如何满足我的要求。 So can someone show me how to make a custom filter -or if there is a better way- to do the filtering?
因此,有人可以告诉我如何制作自定义过滤器-或是否有更好的方法进行过滤?
I found this extremely useful link describing everything about filters. 我发现这个非常有用的链接描述了有关过滤器的所有内容。 My problem was that I couldn't read values from view to filter .
我的问题是我无法从视图读取值到过滤器 。
But Angular takes care of this, just like this 但是Angular会像这样
course in courses | filterByDate:filterRadio
Now I sent filterRadio
to filter function as argument 现在我将
filterRadio
发送给filter函数作为参数
angular.module('myAppFilters', []).filter('filterByDate',
function () {
return function (courses, filterRadio) {
//Also, I removed the switch from controller and added it here
}
});
Also, we can send multiple parameters from view like this: 同样,我们可以像这样从视图发送多个参数:
course in courses | filterByDate:filterRadio:from:to
Also an important feature in Angular is alias naming: Angular的另一个重要功能是别名命名:
course in courses | filterByDate:filterRadio:from:to as coursesFiltered
Now we can get it's length like this coursesFiltered.length
现在我们可以得到它的长度,就像这样的
coursesFiltered.length
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.