在Code AngularJS中过滤Json

Question

Hello I have the following JSONs

$scope.Facilities=
[
    {
        Name: "-Select-",
        Value: 0, 
        RegionNumber: 0
    },

    {
        Name: "Facility1",
        Value: 1, 
        RegionNumber: 1

    },

    {
        Name: "Facility2",
        Value: 2, 
        RegionNumber: 1
    },

    {
        Name: "Facility3",
        Value: 3, 
        RegionNumber: 2
    }
];

$scope.Regions=
[
    {
        Name: "-Select-",
        RegionNumber: 0
    },

    {
        Name: "USA",
        RegionNumber: 1
    },

    {
        Name: "Mexico",
        RegionNumber: 2
    }
];

I would have two DropdownLists in my app which will have one of these Jsons assigned to it.

Whenever you select a Region, a ng-change would be triggered. What I want, is to make the Facility DDL to update it's values. It would only show the Facilities which have a RegionNumber equivalent to the selected Region's RegionNumber.

How could I achieve this? I'm using Angular JS, MVC...

Note: The -Select- Value must always appear, even if it's value is zero and is not equivalent to the selected Region.

Answer 1

I think you need a data structure like below:

$scope.Regions=
[
    {
        Name: "-Select-",
        facilities : {
                        facilityId: 1,
                        facilityName: "facility1"
                      },
                     {
                       facilityId: 2,
                        facilityName: "facility2"
                      }
    },

    {
        Name: "USA",
        facilities : [{
                        facilityId: 1,
                        facilityName: "facility1"
                      },
                     {
                       facilityId: 2,
                        facilityName: "facility2"
                      }]

    },

];

So, you could reference them like below:

For the dropdown of Regions, you can iterate through above Data structure. Store the selectedRegion in selectedRegion Then use that for the dropdown for facilities.

Answer 2

While a data structure, like greengrassbluesky may simplify the result, you can accomplish the same thing with an onchange that leverages javascript filtering

$scope.Facilities = masterFacilities.filter(function (el) {
        return regionNumber = el.RegionNumber == $scope.SelectedRegion || el.RegionNumber == 0;
    });

Here's a fiddle with an example using your lists.