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

How can I call a JIRA api through Powershell?

 Navigate to https://id.atlassian.com/manage-profile/security/api-tokens and create an API token Then use the following code: $pair = "me@example.com:<My token here>" $bytes = [System.Text.Encoding]::ASCII.GetBytes($pair) $base64 = [System.Convert]::ToBase64String($bytes) $basicAuthValue = "Basic $base64" $headers = @{ Authorization = $basicAuthValue } $json = Invoke-RestMethod -Uri "https://<mydomain>.atlassian.net/rest/api/3/search?jql= <jql here>" -Method Get -Headers $headers
Read more