如何在AngularJS中使用单选按钮制作自定义过滤器
How to make a custom filter with radio buttons in AngularJS
我有多个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
相关文章:
- jQuery Validate不适用于自定义单选按钮
- 高级自定义字段按单选按钮值排序
- 如何使用CSS和Javascript或DOJO制作自定义单选按钮
- Ckeditor 自定义插件 - 带有单选按钮的对话框
- 根据在单选按钮中选择的值隐藏时间表中的自定义元素
- 为什么自定义单选按钮未被禁用
- 自定义图像作为单选按钮
- 自定义单选按钮和复选框
- 单选按钮的自定义iCheck设计可防止单击时输出总价
- 带有两个单选按钮的谷歌自定义搜索
- 使用单选按钮进行客户端自定义验证
- ASP MVC中自定义的“是/否”单选按钮
- 如何在AngularJS中使用单选按钮制作自定义过滤器
- 自定义单选按钮-在IE中损坏
- JQuery自定义单选按钮代码(代码不起作用)
- 单选按钮的客户端自定义验证器
- 自定义css单选按钮悬停效果
- Jquery Featherlight js自定义CSS单选按钮不工作在模态窗口
- Wordpress自定义字段单选按钮无法选中
- 使用自定义jQuery单选按钮与CakePHP表单助手