AngularJS - Populate Two dropdowns from a nested array

Question

Here is a simplified version of an object I get from a service.

[
  {
    "lookupID": "Annual Leave",
    "lookupCode": "Annual Leave",
    "reasonRecords": [
      {
        "reason": "Annual",
        "docRequired": "N"
      },
      {
        "reason": "Mandatory",
        "docRequired": "N"
      }
    ]
  },
  {
    "lookupID": "Accumulated Leave",
    "lookupCode": "Accumulated Leave",
    "reasonRecords": [
      {
        "reason": "Accumulative",
        "docRequired": "N"
      },
      {
        "reason": "Cancellation",
        "docRequired": "Y"
      }
    ]
  },
  {
    "lookupID": "Study Leave",
    "lookupCode": "Study Leave",
    "reasonRecords": [
      {
        "reason": "Examination Leave",
        "docRequired": "N"
      },
      {
        "reason": "Research Leave",
        "docRequired": "N"
      }
    ]
  }
]

I need to populate two dopdowns (which can be repeated x number of times)

End result should look something like this

The first is already populated and working, it displays all the possible LookupID's

<select class="form-control" id="leavetype_{{$index}}" ng-model="leaveEntry.leaveTypeKey" value="leaveEntry.leaveTypeKey" ng-required>
    <option ng-repeat="leaveType in leaveTypes" value="{{leaveType.lookupCode}}">{{leaveType.lookupCode}}</option>
</select>

The second dropdown should display the possible reasons based on the lookupCode selected in the previous dropdown

It's currently just hardcoded to show the reasons of the first lookupCode

<select class="form-control" id="reason_{{$index}}" ng-model="leaveEntry.reason" value="leaveEntry.reason" ng-required>
    <option ng-repeat="reasonRecord in leaveTypes[0].reasonRecords" value="{{reasonRecord.reason}}" >{{reasonRecord.reason}}</option>
</select>

How do I dynamically populate the second dropdown ?

Bonus: a field then needs to display the appropriate docRequired value based on the selections

Possible duplicate of angularjs ng-options nested json data

Mistalis
– Mistalis

2017-04-03 13:13:49 +00:00
Commented Apr 3, 2017 at 13:13 — Mistalis
– Mistalis, Commented Apr 3, 2017 at 13:13

Manikandan Velayutham · Accepted Answer · 2017-04-03 14:40:59Z

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<html>
<head>

<script>
var app = angular.module('myApp', []);
app.controller('ctrl', ['$scope', function($scope) {
 
  $scope.selectData = [
  {
    "lookupID": "Annual Leave",
    "lookupCode": "Annual Leave",
    "reasonRecords": [
      {
        "reason": "Annual",
        "docRequired": "N"
      },
      {
        "reason": "Mandatory",
        "docRequired": "N"
      }
    ]
  },
  {
    "lookupID": "Accumulated Leave",
    "lookupCode": "Accumulated Leave",
    "reasonRecords": [
      {
        "reason": "Accumulative",
        "docRequired": "N"
      },
      {
        "reason": "Cancellation",
        "docRequired": "Y"
      }
    ]
  },
  {
    "lookupID": "Study Leave",
    "lookupCode": "Study Leave",
    "reasonRecords": [
      {
        "reason": "Examination Leave",
        "docRequired": "N"
      },
      {
        "reason": "Research Leave",
        "docRequired": "N"
      }
    ]
  }
]
}]);
</script>
</head>
<body ng-app="myApp">
<div ng-controller="ctrl">
<select ng-options="data as data.lookupCode for data in selectData" ng-model="lookupCodeselected"> </select>
 <select ng-disabled="!lookupCodeselected" ng-options="data as data.reason for data in lookupCodeselected.reasonRecords" ng-model="selected2"></select>
</div>
</body>
</html>

yBrodsky · Accepted Answer · 2017-04-03 13:39:59Z

1

What you have to do is select the whole object in your first select. Then populate the second select with the children of the object you selected.

<select ng-options="n as n.lookupCode for n in data" ng-model="selected">      
  </select>
  <select ng-options="n as n.reason for n in selected.reasonRecords" ng-model="selected2">      
  </select>

http://jsfiddle.net/hLhtbxb8/

answered Apr 3, 2017 at 13:39

yBrodsky

5,0614 gold badges24 silver badges35 bronze badges

Collectives™ on Stack Overflow

AngularJS - Populate Two dropdowns from a nested array

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related