filter by multiple values angularjs

Question

I would like to perform the filter and get the count of the resulted rows in js file

Filter by

1) locationId and
2) startDate between introductoryPeriodStart and introductoryPeriodEnd.

The following statement is giving synatx error. Could somebody please give me the right statement.

$scope.NewEmps = $filter('filter')($scope.Summary.CorpEmployees, { locationId: $scope.selectedItem.Label } | { startDate:$scope.Model.introductoryPeriodStart:$scope.Model.introductoryPeriodEnd}).length;

Code :

DashBoardModule.controller('DashBoardController', ['$scope','$filter', 'DashBoardModuleService', function ($scope,$filter, DashBoardModuleService) {

    $scope.SelectedItems = {};
    $scope.NewEmps;
    $scope.Qualfd;
    $scope.Scred;
    $scope.submtd8850MisinDocs;
    $scope.DocsRecvd8850;
    $scope.DocsSubmtd8850;
    $scope.Approved;
    $scope.Denied;
    $scope.NeedMoreInfo;
    $scope.selectedItem;
var Ein = '0000000';

    DashBoardModuleService.GetDashBoardSummary(Ein).then(function (response) {
       // $scope.Summary = JSON.stringify(response.data.Summary);
        $scope.Summary = response.data.Summary;
        $scope.corporateId = response.data.Summary.corporateId;       
        $scope.dropboxitemselected = function (item) {
            $scope.selectedItem = item;          
        }     
        console.log($scope.Summary);
    });

    $('#txtDateRange').on('apply.daterangepicker', function (ev, picker) {
        $scope.isRefreshing = true;
        $scope.Model.introductoryPeriodEnd = $filter('date')(new Date(picker.endDate), 'MM/dd/yyyy');
        $scope.Model.introductoryPeriodStart = $filter('date')(new Date(picker.startDate), 'MM/dd/yyyy');
        $scope.Model.typeAvailability = picker.chosenLabel === "Custom Range" ? "Custom" : picker.chosenLabel;
        $scope.$apply();

        console.log($scope.Model.introductoryPeriodEnd);
        console.log($scope.Model.introductoryPeriodStart);
        $scope.FilterByDate();
    });   

    angular.element(document).ready(function () {
        var dateConfiguration = new Date();
        $('#txtDateRange').daterangepicker({
            locale:{
                format: 'MM/DD/YYYY'
            },
            autoApply: true
        });
        loadChartCallCenter();
        loadChartHumanEfits();
        loadChartQualificationSource(362, 100, 88);
    });

    $scope.greaterThan = function (prop, val) {
        return function (item) {
            return item[prop] > val;
        }
    };

    $scope.lessThan = function (prop, val) {
        return function (item) {
            return item[prop] < val;
        }
    };

    $scope.FilterByDate = function () {
        console.log($scope.selectedItem);
        console.log($scope.selectedItem.Label);
        console.log($scope.Model.introductoryPeriodStart);
        console.log($scope.Summary.CorpEmployees);

        $scope.NewEmps = $scope.$eval("Summary.CorpEmployees | filter:{locationId:selectedItem.Label} | filter:greatherThan('startDate',Model.introductoryPeriodStart) | filter:lessThan('startDate',Model.introductoryPeriodEnd)").length;
        }
    };
}]);

you dont need to use angularjs here, you can just filter the array using the filter function of the array prototype. — mkoryak
– mkoryak, Commented Jun 7, 2016 at 1:57

joseglego · Accepted Answer · 2016-06-09 18:15:10Z

2

You have few errors: 0- The date (greather / less) filters are not defined. 1- You can't use in this way.

So: 0- Define greatherThan

$scope.greaterThan = function(prop, val){
  return function(item){
    return item[prop] > val;
  }
};

1- Define lessThan

$scope.lessThan = function(prop, val){
  return function(item){
    return item[prop] < val;
  }
};

2- Use $scope.$eval

$scope.size =  $scope.$eval("elements | filter:{locationId:location} | filter:greatherThan('startDate',initDate) | filter:lessThan('startDate',endDate)").length;

I updated with a better approach. Check this:

I combine lessThan with greatherThan in a only one: inRangeDate. Plus, if it is not a date I will automatically cast to date.

$scope.inRangeDate = function (prop, init, end) {
  return function(item){
    init = init instanceof Date ? init : new Date(init);
    end = end instanceof Date ? end : new Date(end);
    return item[prop] > init && item[prop] < end;
  }
};

Check this Plunkr: http://plnkr.co/edit/bxPdNAUjV6I0uuJb8iRp?p=preview (I apply it on the $scope.size) 0. The first approach is in Version 4 of Plunkr 1. The inRangeDate approach is in Version 5 of same Plunkr

edited Jun 9, 2016 at 18:15

answered Jun 7, 2016 at 3:34

joseglego

2,1091 gold badge20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

BumbleBee Over a year ago

I am getting the following error Uncaught TypeError: Cannot read property 'length' of undefined

joseglego Over a year ago

Can you share your code to check if there is a problem? Did you check the Plunkr? Can you try using $scope.$eval('elements').length, if it works add filter by filter until got again the error.

BumbleBee Over a year ago

I shared the code. The error is gone now. I change from $eval('$scope.Summary') to $eval('Summary'). But , $eval is not producing the desired results. pasted below or two lines of code. The $filter producing the correct results but $eval is not doing any filtering. console.log($filter('filter')($scope.Summary.CorpEmployees, { locationId: $scope.selectedItem.Label })); console.log($scope.$eval("Summary.CorpEmployees | filter:{locationId:$scope.selectedItem.Label}"));

joseglego Over a year ago

Ok, in the eval try this: console.log($scope.$eval("Summary.CorpEmployees | filter:{locationId:selectedItem.Label}")); I removed the $scope suffix of $scope.selectedItem.Label

joseglego Over a year ago

Ok, it looks pretty cool. But, I have a doubt: did you try to do the cast to date with code above? It is the only think I think it could go wrong before :D Check again the Plunkr: plnkr.co/edit/bxPdNAUjV6I0uuJb8iRp?p=preview I added a inRangeDate (so will be only one filter, plus it will cast to date if is not a date provided)

|

Collectives™ on Stack Overflow

filter by multiple values angularjs

1 Answer 1

14 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Related