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


Comments

Post a Comment

Popular posts from this blog

SharePoint 2013: Error updating managed account credentials

I encountered the following message when trying to change a password for a managed account: Error deploying administration application pool credentials. Another deployment may be active. An object of the type Microsoft.SharePoint.Administration.SPAdminAppPoolCredentialDeploymentJobDefinition named "job-admin-apppool-change" already exists under the parent Microsoft.SharePoint.Administration.SPTimerService named "SPTimerV4".  Rename your object or delete the existing object. The error message is self explanatory - Rename your object or delete the existing object.  I choose the latter. Powershell to the rescue. $job = Get-SPTimerJob -Identity "job-admin-apppool-change" $job.Delete() Reset the password and all should be good.
Read more

Error deploying Nintex workflow: An item with the same key has already been added

My client recently upgraded their version of Nintex Workflow 2010 and suddenly some of my workflows started to fail on deployment. The following error cropped up: Error deploying workflow: Server was unable to process request. ---> An item with the same key has already been added. ---> An item with the same key has already been added. WTF???? A little digging unveiled the problem - I had two items in a 'Create Item' shape with the SAME DISPLAYNAME. I needed to move the second item to a new 'Update Item' shape in order for it to work. I order to get the workflow to deploy, I had to manually remove the 'duplicate' item from the serialized XML. Hooray!! It was then a simple matter of creating a new shape to update the 'duplicate' value.
Read more