CODEWITHSUNDEEP
angularjs
BumbleBee
BumbleBee

Reputation: 10789

filter by multiple values angularjs

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

Upvotes: 1

Views: 67

Answers (1)

joseglego
joseglego

Reputation: 2109

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

Upvotes: 2

Related Questions