按日期季度的 Angular 自定义过滤 [英] Angular Custom Filtering by Date Quarter

问题描述

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

不幸的是，我无法让它工作.这是我的 HTML:

<选择 ng-model="advancedFiltersy"><option ng-repeat="indexitem in Quarter">{{indexitem}}</option></选择><div ng-repeat="列表中的项目 | advFilterName:advancedFiltersy:quarters">{{项目名称}}

这是我的 Angular 脚本:

angular.module('programApp', ['programApp.controllers','programApp.filters']);angular.module('programApp.controllers', []).controller('programController', ['$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':'第五'},{'name':'ag','aacApprovalIconQuarter':'sixth'}];}]);angular.module('programApp.filters', []).filter('advFilterName', function(){返回函数(条目，高级过滤器，宿舍){var advFiltered = [];angular.forEach(条目，函数(条目){if(quarters.indexOf(advancedFiltersy) > quads.indexOf(entry.aacApprovalIconQuarter)){}别的{advFiltered.push(entry);};});};});

ng 重复项均未显示，因此过滤器无法正常工作.我需要做什么才能使过滤器正常工作?

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

解决方案

你还是需要返回过滤结果的值:

angular.module('programApp.filters', []).filter('advFilterName', function(){返回函数(条目，高级过滤器，宿舍){var advFiltered = [];angular.forEach(条目，函数(条目){if(quarters.indexOf(advancedFiltersy) > quads.indexOf(entry.aacApprovalIconQuarter)){}别的{advFiltered.push(entry);};});//使固定返回 advFiltered;};});

修正在这里:http://codepen.io/anon/pen/LVbdQo?editors=101

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.

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>

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);
            };
        });
    };
});

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?

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;
    };
});

Fixed here: http://codepen.io/anon/pen/LVbdQo?editors=101

这篇关于按日期季度的 Angular 自定义过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！