CODEWITHSUNDEEP
angularjs
Balanjaneyulu K
Balanjaneyulu K

Reputation: 4324

Unable to render the values in drop down list

I have a JSON text and three dropdown lists.

First dropdown list will be populating Entities (Applicant, Person, Plan). Second dropdown list will be populating Association Types of selected Entity from previous selection. 

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

The third dropdown list should populate the Attribute values. (Based on selection of Association Type from the second dropdown list, it should display the attributes of respective Entity)

Example: If I select Person Association type in 2nd dropdown list then Attributes of Person Entity has to be displayed.

I have tried solving this problem.

I could get the values for the first two dropdown lists. I have tried rendering the values however I am facing some problems.

Can someone help me how to get the values??

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

If you dont understand question, Please dont hesitate to ask. Thanks

Upvotes: 1

Views: 361

Answers (3)

Nifal Nizar
Nifal Nizar

Reputation: 963

Hope this solve your issue. 

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

But still I have some issues.

For the dropdown1 you have three values(Applicant, Person, Plan).

If you select Applicant you will load Associations(Person, Plan) to the dropdown2.

What if you select either Person or Plan in dropdown1 ?
For those two you don't have associations ryt.

Upvotes: 1

Nifal Nizar
Nifal Nizar

Reputation: 963

I checked your codes.
In the third drop-down your loading the data from

sel.name for sel in z.Attributes

Where it has to be

sel.name for sel in x.Attributes

Then you will get the dropdown

Upvotes: 0

Arthur S.
Arthur S.

Reputation: 202

First of all, we can't test your jsbin, because the get request fails (ERR_NAME_NOT_RESOLVED)

Secondly, I see this line of code:

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

You've set the ng-model to 'z', and then try to get the options from 'z.Attribute', but your 'z' model is not populated with anything. Maybe you wanted to make y.Attributes ?

UPDATE:

I think you are having troubles with your JSON data. here's an updated link. Select Applicant -> Person -> FamilyMembers

is this the behaviour you want?

If so, look how I've modified your select:

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

and this is how I've modified your JSON data:

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

so names is an array containing your values.

Upvotes: 0

Related Questions