Javascript AngularJS-基于选定值显示数据列表

Javascript AngularJS-基于选定值显示数据列表,javascript,angularjs,html-select,Javascript,Angularjs,Html Select,谢谢你的帮助。 我有一个JSON数据,格式如下 { 状态1:[成员1,成员2], 国家2:[成员,成员4…], ... } 还有一个下拉列表,显示JSON数据上的状态列表。根据所选状态,我需要在表上显示相应的成员列表 angular.module('mainModule',[]).controller('FetchController',['$scope',function($scope){ $scope.datas={ “MN”:[{ “id”:“727344064”, “地址”:“8614

谢谢你的帮助。 我有一个JSON数据,格式如下

{ 状态1:[成员1,成员2], 国家2:[成员,成员4…], ... }

还有一个下拉列表,显示JSON数据上的状态列表。根据所选状态,我需要在表上显示相应的成员列表

angular.module('mainModule',[]).controller('FetchController',['$scope',function($scope){
$scope.datas={
“MN”:[{
“id”:“727344064”,
“地址”:“8614 LIPSEY PKWY”,
“city”:“LEWISTON”,
“名字”:“DAINA”,
“lastName”:“FASSETT”,
“国家”:“MN”,
“zip”:“55952”
},
{
“id”:“222743521”,
“地址”:“2220基尔PKWY”,
“城市”:“罗切特”,
“名字”:“MIKI”,
“姓氏”:“MCSHANE”,
“国家”:“MN”,
“zip”:“56578”
},
{
“id”:“581993933”,
“地址”:“贾沃斯基路5933号”,
“城市”:“尤蒂卡”,
“名字”:“吉安娜”,
“姓氏”:“拉法夫”,
“国家”:“MN”,
“zip”:“55979”
}
],
“IL”:[{
“id”:“101396885”,
“地址”:“JAUREGUI大道4829号”,
“城市”:“科科伦”,
“名字”:“卡罗拉”,
“姓氏”:“阿尔瓦”,
“州”:“IL”,
“zip”:“55357”
},
{
“id”:“61041160”,
“地址”:“9574 OMEARA PKWY”,
“城市”:“罗克福德”,
“名字”:“奇瑞”,
“姓氏”:“TWOMEY”,
“州”:“IL”,
“zip”:“55373”
},
{
“id”:“890443901”,
“地址”:“ZITO大街9259号”,
“城市”:“CHANHASSEN”,
“名字”:“利泽特”,
“姓氏”:“JAUREGUI”,
“州”:“IL”,
“zip”:“55317”
},
{
“id”:“416775920”,
“地址”:“卡德尔路6743号”,
“城市”:“皮尔兹”,
“名字”:“桑迪”,
“姓氏”:“尼格罗”,
“州”:“IL”,
“zip”:“56364”
},
{
“id”:“519809487”,
“地址”:“麦金齐大道5544号”,
“城市”:“布卢明顿”,
“名字”:“ALESHIA”,
“姓氏”:“手指”,
“州”:“IL”,
“zip”:“55435”
}
],
“纽约”:[{
“id”:“309969937”,
“地址”:“3306萨里街”,
“城市”:“鸬鹚”,
“名字”:“TWANNA”,
“姓氏”:“障碍”,
“州”:“纽约”,
“zip”:“56572”
},
{
“id”:“12713045”,
“地址”:“彭德利大道8211号”,
“城市”:“苏丹”,
“名字”:“尤兰达”,
“姓氏”:“骨髓”,
“州”:“纽约”,
“zip”:“55782”
},
{
“id”:“108468358”,
“地址”:“比伯街3167号”,
“城市”:“德克斯特”,
“名字”:“JEANMARIE”,
“姓氏”:“障碍”,
“州”:“纽约”,
“zip”:“55926”
}
],
“好的”:[{
“id”:“93804840”,
“地址”:“尼克大道6236号”,
“城市”:“安多弗”,
“名字”:“RICKI”,
“lastName”:“KEARSE”,
“状态”:“确定”,
“zip”:“55304”
},
{
“id”:“536729166”,
“地址”:“1939跨栏大道”,
“城市”:“ABMPS”,
“名字”:“LAQUANDA”,
“姓氏”:“RIDENHOUR”,
“状态”:“确定”,
“zip”:“55472”
}
]
}
}]);

文件查看器应用程序
选择状态:
{{state}}

缔约国成员: 身份证件 地址 城市 名字 姓 陈述 拉链
我已经有一段时间没有在Angular JS中做最后一次了:)

在您的Plunker示例中,已经存在:

ng-change="changeSelectedState()"
但是您缺少实现

我建议采取以下办法:

$scope.selectedState = "";
$scope.selectedMembers = [];

$scope.changeSelectedState = function() {
    $scope.selectedMembers = $scope.datas[$scope.selectedState];
};
其中,$scope.selectedState是一个保存所选状态值的范围变量,例如“MN”和$scope.selectedMembers包含具有相应状态成员的数组

您应该做的最后一件事是在成员表上实现ng repeat循环


编辑:

谢谢。它对我有用。这很麻烦,因为我对angularjs还不熟悉。