Monday, 30 May 2016

AngularJS: How do I create cascading lists?

I was looking for a cascading list solution and I found one here that almost gave me what I needed. I added a few tweaks to get my desired result.

UPDATE: Be very careful with the items that are used in the filter. The filter is a string based comparison, so performing a filter on 'ID=1' will also return items for ID=10,ID=11 etc.

My solution was to create two new properties: filterId and filterParentId. These are set to '<placeholder>ID<placeholder>'. For example, ###1###. You can then filter

So, instead of searching for 1, you could search for ##1##, which would remove the unwanted results.

My code is as follows:

html:
            <select class="form-control"
                    ng-model="selectedParentItem"
                    ng-change="parentchanged()"
                    ng-options="p.displayName for p in parentItems"></select>

            <select class="form-control"
                    ng-model="selectedChildItem"
                    ng-disabled="!selectedParentItem"
                    ng-options="c.displayName for c in childItems | filter:{filterParentId: selectedParentItem.filterId}"></select>

            <select class="form-control"
                    ng-model="selectedGrandChildItem"
                    ng-disabled="!selectedChildItem"
                    ng-options="g.displayName for g in grandChildItems | filter:{filterParentId: selectedChildItem.filterParentId}"></select>

js:
    $scope.parentchanged = function ()
    {
        $scope.selectedGrandChildItem = undefined;
    }

    $scope.parentItems = [
        {
            "id": 0,
            "displayName": "parent 00",
            "filterId": ##0##
        },
        {
            "id": 1,
            "displayName": "parent 01",
            "filterId": ##1##
        },
        {
            "id": 2,
            "displayName": "parent 02"
            "filterId": ##2##
        }
    ];

    $scope.childItems = [
        {
            "id": 0,
            "displayName": "child0 of 00",
            "parentId": 0,
            "filterParentId": ##0##
        },
        {
            "id": 1,
            "displayName": "child1 of 00",
            "parentId": 0,
            "filterParentId": ##0##
        },
        {
            "id": 2,
            "displayName": "child2 of 00",
            "parentId": 0,
            "filterParentId": ##0##
        },
        {
            "id": 3,
            "displayName": "child0 of 01",
            "parentId": 1,
            "filterParentId": ##1##
        },
        {
            "id": 4,
            "displayName": "child1 of 01",
            "parentId": 1,
            "filterParentId": ##1##
        },
        {
            "id": 5,
            "displayName": "child0 of 02",
            "parentId": 2,
            "filterParentId": ##2##
        }
    ];

    $scope.grandChildItems = [
    {
        "id": 0,
        "displayName": "grandChild0 of 00",
        "parentId": 0,
         "filterParentId": ##0##
    },
    {
        "id": 1,
        "displayName": "grandChild1 of 00",
        "parentId": 0,
         "filterParentId": ##0##
    },
    {
        "id": 2,
        "displayName": "grandChild2 of 00",
        "parentId": 0,
         "filterParentId": ##0##
    },
    {
        "id": 3,
        "displayName": "grandChild0 of 01",
        "parentId": 1,
         "filterParentId": ##1##
    },
    {
        "id": 4,
        "displayName": "grandChild1 of 01",
        "parentId": 1,
         "filterParentId": ##1##
    },
    {
        "id": 5,
        "displayName": "grandChild0 of 02",
        "parentId": 2,
         "filterParentId": ##2##
    }
    ];


No comments:

Post a comment