AngularJS: Multiple Custom filter/search

Question

I've been working on this Degree Program finding tool that uses AngularJS. What I'm trying to build is an eCommerce style sidebar filtering options. I have gotten Degree Levels and a free-form search field working together, but I haven't been able to get the Locations Offered filter to work in conjunction with the radio buttons.

This is my controller:

    $scope.search = function (row) {
    return (
        angular.lowercase(row.DPNAME).indexOf(angular.lowercase($scope.query) || '') !== -1 ||
        angular.lowercase(row.DPCAREERS).indexOf(angular.lowercase($scope.query) || '') !== -1 ||
        angular.lowercase(row.DPCONCENTRATIONS).indexOf(angular.lowercase($scope.query) || '') !== -1
    );
};
$scope.DLsearch = function (row) {
    return (
        row.DPDEGREELEVEL.indexOf($scope.qDegreeLevel || '') !== -1
    );
};

$scope.LOCsearch = function (row) {
    return (
        row.DPONCAMPUSMESA == 'Yes'
    );
};

And its that last filter that isn't quite working right. If you replace "DPONCAMPUSMESA" with any of the other location fields (such as DPONCAMPUSLISLE or DPNONTRADNMCALCENTRALIL) it does filter the data correctly. But I haven't been able to connect it to the radio buttons.

I'm also open to a different approach to the filters.

Here is the CodePen I've been working on: http://codepen.io/ksherman/pen/yYqGgx?editors=101 And if you're interested in the JSON structure: http://www.jsoneditoronline.org/?id=5145f3cca9dd9d5e5eaef2e39e2b2808

xersiee · Accepted Answer · 2015-12-16 21:30:10Z

1

I've opened your CodePen and last filter works exactly how it's written - leaves only two rows for which condition is met (row.DPONCAMPUSMESA == 'Yes'). To make it more generic try:

$scope.LOCsearch = function (row) {
    if (!$scope.qLocation) {
        return true; // no filter or 'All' option
    } else {
        return row[$scope.qLocation] == 'Yes';
    }
};

answered Dec 16, 2015 at 21:30

xersiee

4,4721 gold badge17 silver badges25 bronze badges

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

1 Comment

Kevin Sherman Over a year ago

Thanks! I knew I was really close, I just couldn't figure out how to use the qLocation variable. So it was the row[...] that answered it for me! Whew, still more javascript to learn.

Collectives™ on Stack Overflow

AngularJS: Multiple Custom filter/search

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related