javascript - 按日期季度进行 Angular 自定义过滤

标签 javascript angularjs angularjs-ng-repeat angularjs-filter

我有一个对象数组,在页面上重复出现。我还有一个排列在下拉选择框中的日期季度列表。如果下拉列表中选择的季度晚于 ng-repeated 列表中的某个项目,则应过滤掉该项目。

不幸的是,我无法让它工作。这是我的 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 脚本:

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-repeated 项目,因此过滤器无法正常工作。我需要做什么才能使过滤器正常工作?

这是它的 Codepen:http://codepen.io/trueScript/pen/MwbVpO

最佳答案

您仍然需要返回过滤结果的值:

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

关于javascript - 按日期季度进行 Angular 自定义过滤,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30469577/

相关文章:

javascript - 无法在 Backbone 中绑定(bind)点击事件

javascript - 在 html div 上粘贴事件,内容不可编辑

javascript - ng-bind-html 无法解析正确的 HTML 并绑定(bind)它

javascript - ngTable 中带有 Typeahead 和工具提示的 AngularUI,在 scope.isOpen 处未定义自定义 header 长度

javascript - angular.js 可以与 JSTL 表达式语言通信吗?

javascript - Javascript 中的图像 slider

javascript - 你如何在 p5.js 中制作一个圆形按钮?

javascript - 使用 angularjs 获取对象形式的结果

javascript - ng-repeat 执行多次

javascript - 从授权码google oauth2获取刷新 token