在Code AngularJS中过滤Json

时间:2015-11-10 00:25:11

标签: javascript html json angularjs

您好我有以下JSON

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

我的应用程序中有两个DropdownLists,其中有一个分配给它的Jsons。

每当您选择区域时,都会触发ng-change。我想要的是使Facility DDL更新它的值。它只显示RegionNumber等于所选Region的RegionNumber的设施。

我怎么能实现这个目标?我正在使用Angular JS,MVC ......

注意:-Select- Value必须始终显示,即使它的值为零且不等于所选区域。

2 个答案:

答案 0 :(得分:1)

我认为您需要一个如下所示的数据结构:

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

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

    },

];

所以,你可以像下面这样引用它们:

对于Regions的下拉列表,您可以遍历上面的Data结构。 将selectedRegion存储在selectedRegion中 然后将其用于设施的下拉列表。

答案 1 :(得分:1)

虽然像greengrassbluesky这样的数据结构可以简化结果,但你可以使用利用javascript过滤的onchange完成同样的事情

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

这是一个fiddle,其中有一个使用您的列表的示例。