Angularjs 无法呈现下拉列表中的值_Angularjs

Angularjs 无法呈现下拉列表中的值

angularjs

Angularjs 无法呈现下拉列表中的值,angularjs,Angularjs,我有一个JSON文本和三个下拉列表第一个下拉列表将是填充实体（申请人、人员、计划）。第二个下拉列表将填充上一选择中选定实体的关联类型 (Here ‘Person’ and ‘Plan’ will be rendered by selecting “Applicant” as Entity) 第三个下拉列表应填充属性值。（根据从第二个下拉列表中选择的关联类型，它应该显示相应实体的属性）示例：如果我在第二个下拉列表中选择了Person关联类型，则必须显示Person实体的属性我试过解决这个

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

第一个下拉列表将是填充实体

（申请人、人员、计划）

。第二个下拉列表将填充上一选择中选定实体的关联类型

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

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

示例：如果我在第二个下拉列表中选择了

Person

关联类型，则必须显示Person实体的属性

我试过解决这个问题

我可以得到前两个下拉列表的值。我已经尝试渲染这些值，但是我面临一些问题

有人能帮我如何得到这些值吗

若你们不明白这个问题，请不要犹豫问。谢谢

首先，我们无法测试您的jsbin，因为get请求失败（ERR\u NAME\u NOT\u RESOLVED）

其次，我看到这行代码：

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

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

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

所以名称是一个包含值的数组。

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

z.属性中sel的sel.name

它应该在哪里

x.属性中sel的sel.name

然后您将获得下拉列表

希望这能解决您的问题

<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>


var angular=angular.module（'myApp'，[]）；
角度控制器（'myCtrl'，函数（$scope，$http）{
$scope.data=[
{
“属性”：[
{“name”：“CSRPercent”，“attributeType”：“decimal”}，
{“名称”：“日期”，“属性类型”：“日期”}，
{“name”：“hoursPerWeek”，“attributeType”：“long”}，
{“name”：“householdSize”，“attributeType”：“long”}，
{“name”：“income”，“attributeType”：“decimal”}，
{“name”：“incomePeriod”，“attributeType”：“string”}，
{“name”：“IsEligibleForCostSharingReducement”，“attributeType”：“boolean”}，
{“名称”：“isEligibleForIncomeBasedMedi_CAL”，“属性类型”：“布尔”}，
{“name”：“isEligibleForMedi_Cal_Access”，“attributeType”：“boolean”}，
{“name”：“isEligibleForPremiumAssistance”，“attributeType”：“boolean”}，
{“名称”：“状态”，“属性类型”：“字符串”}，
{“name”：“zip”，“attributeType”：“string”}
],
“协会”：[
{“associationType”：“Person”，“name”：“familyMembers”}，
{“associationType”：“计划”，“名称”：“计划”}
],
“实体”：“申请人”
},
{
“属性”：[
{“name”：“age”，“attributeType”：“long”}，
{“name”：“isPregnant”，“attributeType”：“boolean”}
],
“实体”：“人”
},
{
“属性”：[
{“名称”：“公司”，“属性类型”：“字符串”}，
{“name”：“costPerPerson”，“attributeType”：“decimal”}，
{“name”：“name”，“attributeType”：“string”}，
{“name”：“premiumAssistance”，“attributeType”：“decimal”}，
{“name”：“stars”，“attributeType”：“long”}，
{“name”：“totalMonthlyPremium”，“attributeType”：“decimal”}，
{“name”：“yourMonthlyPremium”，“attributeType”：“decimal”}
],
“实体”：“计划”
}
];
$scope.dataDD2=[]；
$scope.loadDD3=函数（）{
对于（变量i=0；i<$scope.data.length；i++）{
var obj=$scope.data[i]；
if（obj.Entity==$scope.dd2.associationType）
{
$scope.dataDD3=对象属性；
}
}           
};
});

但我还是有一些问题

对于下拉列表1，您有三个值（申请人、人员、计划）

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

如果在下拉列表1中选择人员或计划，该怎么办？

对于这两个，您没有关联ryt。

您的http请求不起作用。获取此错误：加载资源失败：net:：ERR\u NAME\u NOT\u RESOLVEDYou是正确的，但是y。由于关联类型没有属性，因此属性不提供任何内容。只有实体才有。在他的要求中，他说：“第三个下拉列表应该填充属性值。（根据从第二个下拉列表中选择的关联类型，它应该显示相应实体的属性）”但在您的代码中，第三个下拉列表不依赖于第二个。@Nifal Nizar，谢谢您的回答。我的要求是Arthur所评论的。我试图将从第二个下拉列表中选择的值与实体进行比较，并将实体分配给某个模型变量，然后尝试获取值。@Balu，你检查过我更新的答案了吗？你好，Arthur，我检查过你的答案了。您正在显示关联类型的名称。我需要渲染Person实体的属性。如果我从第二个下拉列表中选择Person，则第三个下拉列表应列出年龄、isPregnant值。如果我从第二个下拉列表中选择飞机，第三个下拉列表应列出公司、costPerPerson、姓名、明星等。你好，尼法尔·尼扎尔，您的解决方案运行良好。但是，如果我从第一个下拉列表中选择“人员”或“计划”，则第二个和第三个下拉列表应被禁用。您好，我已修改了代码。请核对一下。在这里，我可以禁用第三个下拉列表，但之前选择的值处于选中和禁用状态。你能看到这个吗？写一个条件并更改$scope.dataDD3=[]；

<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>