Question

我有一个JSON文本和三个下拉列表。

第一个下拉列表将填充实体(Applicant, Person, Plan)。第二个下拉列表将填充先前选择的所选实体的关联类型。

(Here ‘Person’ and ‘Plan’ will be rendered by selecting “Applicant” as Entity)

第三个下拉列表应填充属性值。（根据从第二个下拉列表中选择的关联类型，它应该显示相应实体的属性）

示例：如果我在第二个下拉列表中选择Person关联类型，则必须显示人员实体的属性。

我试过解决这个问题。

我可以获得前两个下拉列表的值。我试过渲染值，但是我遇到了一些问题。

有人能帮助我如何获取价值吗？

http://jsbin.com/toqisibumo/edit?html,js,output

如果你不明白问题，请不要犹豫。感谢

Answer 1

希望这可以解决您的问题。

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">

  <select ng-model="dd1" ng-options="item.Entity for item in data">
  </select>

  <select ng-model="dd2" ng-options="ass.associationType for ass in dd1.Associations" ng-change="loadDD3()"> 
  </select>

  <select ng-model="dd3" ng-options="atr.name for atr in dataDD3">
  </select>

</body>
<script>
    var angular = angular.module('myApp', []);

    angular.controller('myCtrl', function($scope,$http) {

        $scope.data = [
            {
                "Attributes":[
                    {"name":"CSRPercent","attributeType":"decimal"},
                    {"name":"date","attributeType":"date"},
                    {"name":"hoursPerWeek","attributeType":"long"},
                    {"name":"householdSize","attributeType":"long"},
                    {"name":"income","attributeType":"decimal"},
                    {"name":"incomePeriod","attributeType":"string"},
                    {"name":"isEligibleForCostSharingReduction","attributeType":"boolean"},
                    {"name":"isEligibleForIncomeBasedMedi_CAL","attributeType":"boolean"},
                    {"name":"isEligibleForMedi_Cal_Access","attributeType":"boolean"},
                    {"name":"isEligibleForPremiumAssistance","attributeType":"boolean"},
                    {"name":"state","attributeType":"string"},
                    {"name":"zip","attributeType":"string"}
                ],
                "Associations":[
                    {"associationType":"Person","name":"familyMembers"},
                    {"associationType":"Plan","name":"plans"}
                ],
                "Entity":"Applicant"
            },
            {
                "Attributes":[
                    {"name":"age","attributeType":"long"},
                    {"name":"isPregnant","attributeType":"boolean"}
                ],
                "Entity":"Person"
            },
            {
                "Attributes":[
                    {"name":"company","attributeType":"string"},
                    {"name":"costPerPerson","attributeType":"decimal"},
                    {"name":"name","attributeType":"string"},
                    {"name":"premiumAssistance","attributeType":"decimal"},
                    {"name":"stars","attributeType":"long"},
                    {"name":"totalMonthlyPremium","attributeType":"decimal"},
                    {"name":"yourMonthlyPremium","attributeType":"decimal"}
                ],
                "Entity":"Plan"
            }
        ];

        $scope.dataDD2 = [];
        $scope.loadDD3=function(){
            for(var i = 0; i < $scope.data.length; i++) {
                var obj = $scope.data[i];
                if(obj.Entity == $scope.dd2.associationType)
                {
                    $scope.dataDD3 = obj.Attributes;
                }
            }           
        };

    });
</script>
</html>

但我仍有一些问题。

对于dropdown1，您有三个值（申请人，人，计划）。

如果您选择申请人，则会将关联（人员，计划）加载到下拉列表2。

如果您在下拉列表中选择人员或计划，该怎么办？对于那两个你没有关联的人。

Answer 2

首先，我们无法测试您的jsbin，因为get请求失败（ERR_NAME_NOT_RESOLVED）

其次，我看到这行代码：

<select ng-model="z" ng-change="addAttributes()" ng-options="sel.name for sel in z.Attributes">

您已将ng-model设置为'z'，然后尝试从'z.Attribute'获取选项，但您的'z' model未填充任何内容。也许你想制作y.Attributes？

更新：

我认为您的JSON数据存在问题。这是一个updated link。选择申请人 - ＆gt;人 - ＆gt; FamilyMembers

这是你想要的行为吗？

如果有，请查看我如何修改您的选择：

<select ng-model="z" ng-change="addAttributes()" ng-options="color.name for color in y.names">

这就是我修改你的JSON数据的方式：

... "Associations":[{"associationType":"Person","names":[{"name" : "familyMembers"}]} ...

所以names是一个包含你的值的数组。

Answer 3

我检查了你的代码在第三个下拉列表中，您可以从

加载数据

z.Attributes中的sel的sel.name

必须在哪里

x.Attributes中的sel的sel.name

然后你会得到下拉列表

无法在下拉列表中呈现值

3 个答案: