AngularJS Exact Filter Match in Values

In one of my older AngularJS project I was facing a strange issue, there were two select boxes with values populated differently in them. The values in second select drop-down depend upon the first one.

So the required scenario is to show only those values in the second drop down who is under selected value in the first drop down.

take some sample objects for these select drop down as follows:

        $scope.dropDownOne = [
            {
                id:1,
                value:'parent 1'
            },
            {
                id:2,
                value:'parent 2'
            },
            {
                id:12,
                value:'parent 12'
            }
        ];

        $scope.dropDownTwo = [
            {
                id:1,
                parentid:2,
                value:'parent 2 child 1'
            },
            {
                id:2,
                parentid:12,
                value:'parent 12 child 2'
            },
            {
                id:12,
                parentid:2,
                value:'parent 2 child 12'
            },
            {
                id:3,
                parentid:12,
                value:'parent 12 child 3'
            },
            {
                id:33,
                parentid:12,
                value:'parent 12 child 33'
            },
            {
                id:6,
                parentid:2,
                value:'parent 2 child 6'
            },
            {
                id:60,
                parentid:1,
                value:'parent 1 child 60'
            },
            {
                id:16,
                parentid:1,
                value:'parent 1 child 16'
            }
        ];

Now we have ‘id‘ in the first list whose value is given in the second list as ‘parentid‘. now as there is a relation in these lists, we need to show values in the second drop down who’s ‘parentid‘ matched the ‘id‘ in the first list.

Firstly I tried to achieve this using filters as follows:

            <select class=" list-field-height-18 no-padding" name="LocationID"
                    ng-model="filters.dropDownOneSel">
                <option selected="selected" value="">--DropDown One--</option>
                <option ng-repeat="one in dropDownOne" value="{{one.id}}">
                    {{one.value}}
                </option>
            </select>
            <select class=" list-field-height-18 no-padding" name="LocationID"
                    ng-model="filters.dropDownTwoSel">
                <option selected="selected" value="">--DropDown Two--</option>
                <option ng-repeat="two in dropDownTwo  | filter : { parentid: filters.dropDownOneSel}" value="{{two.id}}">
                    {{two.value}}
                </option>
            </select>

But this was not working as expected see below image:

Value 1 is also matching 12 😐

I also tried the strict parameter (true) but of no use.

...
...
ng-repeat="two in dropDownTwo  | filter : { parentid: filters.dropDownOneSel}:true"
...
...

After that, I created this custom filter to strictly filter values

angular.module('app').filter('SELECTFILTER', function ($filter) {
        return function (input, div, selval) {
            //If nothing is selected then show all values. you can remove this condition
            if (div == "" || div === undefined) {
                return input;
            } else {
                var retData = input.filter(function (obj) {
                    return obj[selval] == div;
                });
                return retData
            }

        }
    });

In HTML binding with the filter will look like this

            <select class=" list-field-height-18 no-padding" name="LocationID"
                    ng-model="filters.dropDownTwoSel">
                <option selected="selected" value="">--DropDown Two--</option>
                <option ng-repeat="two in dropDownTwo  | SELECTFILTER:filters.dropDownOneSel:'parentid'" value="{{two.id}}">
                    {{two.value}}
                </option>
            </select>

Then it worked as expected! This is just a simple code to help if someone stuck in a similar situation 🙂