按日期季度进行角度自定义筛选 [英] Angular Custom Filtering by Date Quarter
问题描述
我有一个对象数组,在页面上被ng重复.我还有一个下拉列表选择框中排列的日期季度列表.如果下拉菜单中选择的四分之一晚于ng重复列表中的某个项目,则该项目应被过滤掉.
I've got an array of objects, ng-repeated on the page. I've also got a list of date quarters arrayed in a dropdown select box. If the quarter selected in the dropdown comes later than an item in the ng-repeated list, that item should be filtered out.
不幸的是,我无法正常工作.这是我的HTML:
Unfortunately, I can't get it to work. Here's my HTML:
<div ng-app="programApp" ng-controller="programController">
<select ng-model="advancedFiltersy">
<option ng-repeat="indexitem in quarters">{{indexitem}}</option>
</select>
<div ng-repeat="item in listing | advFilterName:advancedFiltersy:quarters">
{{item.name}}
</div>
</div>
这是我的Angular脚本:
Here's my Angular Script:
angular.module('programApp', ['programApp.controllers','programApp.filters']);
angular.module('programApp.controllers', [])
.controller('programController', ['$scope', '$filter',
function($scope, $filter){
$scope.advancedFiltersy = 'zeroeth';
$scope.quarters = ['zeroeth','first','second','third','fourth','fifth','sixth'];
$scope.listing = [{'name':'aa','aacApprovalIconQuarter':'zeroeth'
},{'name':'ab','aacApprovalIconQuarter':'first'
},{'name':'ac','aacApprovalIconQuarter':'second'
},{'name':'ad','aacApprovalIconQuarter':'third'
},{'name':'ae','aacApprovalIconQuarter':'fourth'
},{'name':'af','aacApprovalIconQuarter':'fifth'
},{'name':'ag','aacApprovalIconQuarter':'sixth'}];
}]);
angular.module('programApp.filters', []).filter('advFilterName', function(){
return function(entries, advancedFiltersy, quarters){
var advFiltered = [];
angular.forEach(entries, function (entry){
if(quarters.indexOf(advancedFiltersy) > quarters.indexOf(entry.aacApprovalIconQuarter)){
}else{
advFiltered.push(entry);
};
});
};
});
没有重复显示ng的项目,因此过滤器无法正常工作.我该怎么做才能使过滤器正常工作?
None of the ng-repeated items are ever showing, so the filter isn't working properly. What do I need to do to get the filter working?
这是其中的一个Codepen: http://codepen.io/trueScript/pen/MwbVpO
Here's a Codepen of it: http://codepen.io/trueScript/pen/MwbVpO
推荐答案
您仍然需要返回过滤结果的值:
You still need to return the value of the filtered results:
angular.module('programApp.filters', []).filter('advFilterName', function(){
return function(entries, advancedFiltersy, quarters){
var advFiltered = [];
angular.forEach(entries, function (entry){
if(quarters.indexOf(advancedFiltersy) > quarters.indexOf(entry.aacApprovalIconQuarter)){
}else{
advFiltered.push(entry);
};
});
// Fix
return advFiltered;
};
});
在此处修复: http://codepen.io/anon/pen/LVbdQo?editors= 101
这篇关于按日期季度进行角度自定义筛选的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!