I have a working demo in which I'm able to create cascading dropdowns based on the Parent. What I'd like to do is make the grandchildren of the cascading dropdown checkboxes instead of selects. I tried using ng-repeat with similar mark-up, but was having issues with it loading the json.
Here's the example of my working cascading dropdown:
//Angular
function MainCtrl($scope) {
$scope.items = [{name: "Denial", id: "1", subcategories: [
{name: 'Authorization', id: '01', triages: [
{name: 'Check Applicable Systems to Verify if Auth Info was Obtained for All Services Provided', id: '01'},
{name: 'Verify Auth is on Claim', id: '02'},
], actions: [
{name: 'Initiated Handoff', id: '01'},
{name: 'Obtained Retro-Auth', id: '02'},
]},
{name: 'Benefits Exhausted', id: '02', triages: [
{name: 'Check Applicable Systems to Verify Auth Info was Obtained for All Services Provided', id: '001'},
{name: 'Verify Benefits are Exhausted in Application Systems', id: '002'}
], actions: [
{name: 'Initiated Handoff', id: '0011'},
{name: 'Called Patient to Resolve', id: '0012'},
{name: 'Applied Contractual/Adjustment', id: '0013'},
{name: 'Transferred Bal to Patient Per Hospital Guidelines', id: '0014'}
]},
{name: 'Technical Claim', id: '03', triages: [
{name: 'Verify Dates of Service', id: '001'},
{name: 'Verify Incorrect Bill Type Billed', id: '002'}
], actions: [
{name: 'Initiated Handoff', id: '0011'},
{name: 'Called Patient to Resolve', id: '0012'},
{name: 'Called Payer to Resolve Billing Denial', id: '0013'}
]},
{name: 'Clinical Non-Covered', id: '04', triages: [
{name: 'Verify Charge(s) in Question', id: '001'},
{name: 'Verify if Denial is Benefits Related (Member Policy Issue)', id: '002'},
], actions: [
{name: 'Initiated Handoff', id: '0011'},
{name: 'Called Patient to Resolve', id: '0012'},
{name: 'Called Payer to Resolve Billing Denial', id: '0013'}
]},
{name: 'Coding', id: '04', triages: [
{name: 'Verify Claim Submitted Correctly', id: '001'},
{name: 'Verify Coding Information in Question', id: '002'}
], actions: [
{name: 'Initiated Handoff', id: '0011'},
{name: 'Called Patient to Resolve', id: '0012'},
{name: 'Called Payer to Verify Coding Info in Question', id: '0013'},
{name: 'Applied Contractual/Adjustment', id: '0014'}
]},
{name: 'Coordination of Benefits', id: '05', triages: [
{name: 'Check Recent Accounts for Payment/Other Coverage', id: '001'},
{name: 'Review Patient Coverage via Applicable System and Identify if Patient Has Other Coverage', id: '002'},
], actions: [
{name: 'Initiated Handoff', id: '0011'},
{name: 'Called Patient to Verify COB Issue', id: '0012'},
{name: 'Called Payer to Resolve', id: '0013'}
]},
{name: 'Duplicate', id: '06', triages: [
{name: 'Confirm Claim is a Duplicate', id: '001'},
{name: 'Review for Encounters with Same Dates of Service', id: '002'},
{name: 'Verify Bill Type', id: '003'},
{name: 'Verify Claim Billed with Correct ICN', id: '004'}
], actions: [
{name: 'Combined Encounters', id: '001'},
{name: 'Cancelled Previous Claim(s)', id: '002'},
{name: 'Transferred Bal to Patient Per Hospital Guidelines', id: '003'}
]},
{name: 'Eligibility', id: '07', triages: [
{name: 'Check Related Visits', id: '001'},
{name: 'Review Patient Coverage via Applicable System and Identify if Patient Has Other Coverage', id: '002'},
{name: 'Verify Insurance/Patient Name/Subscriber is Accurate', id: '003'}
], actions: [
{name: 'Initiated Handoff', id: '0011'},
{name: 'Called Patient to Resolve', id: '0012'},
{name: 'Called Payer to Resolve Eligibility Denial', id: '0013'},
{name: 'Updated Insurance Info', id: '0014'}
]},
{name: 'Lacks Information/Med Records', id: '08', triages: [
{name: 'Verify Info Needed from Payer', id: '001'},
{name: 'Verify Whether Information has Previously Been Provided', id: '002'},
{name: 'Verify Insurance/Patient Name/Subscriber is Accurate', id: '003'}
], actions: [
{name: 'Initiated Handoff', id: '0011'},
{name: 'Called Patient to Resolve', id: '0012'},
{name: 'Called Payer to Resolve Missing Info', id: '0013'},
{name: 'Transferred Bal to Patient Per Hospital Guidelines', id: '0014'},
{name: 'Applied Contractual/Adjustment', id: '0015'}
]},
{name: 'Payer', id: '09', triages: [
{name: 'Verfiy With Payer for Additional Information', id: '001'},
{name: 'Verify Claim Billed With Correct Facility NPI', id: '002'},
{name: 'Verify Payer is Contracted with Rendering Facility', id: '003'}
], actions: [
{name: 'Initiated Handoff', id: '0011'},
{name: 'Called Patient to Resolve', id: '0012'}
]},
{name: 'Provider', id: '10', triages: [
{name: 'Verify Claim Submitted Correctly', id: '001'},
{name: 'Verify Correct NPI in Applicable Systems', id: '002'}
], actions: [
{name: 'Initiated Handoff', id: '0011'},
{name: 'Called Patient to Resolve', id: '0012'},
{name: 'Called Payer to Resolve Credentialing Issue', id: '0013'}
]},
{name: 'Technical Non-Covered', id: '11', triages: [
{name: 'Verify Charge(s) in Question', id: '001'},
{name: 'Verify if Denial is Benefits Related (Member Policy Issue)', id: '002'},
{name: 'Verify if Denial is Related to Services Provided', id: '003'}
], actions: [
{name: 'Initiated Handoff', id: '0011'},
{name: 'Called Patient to Resolve', id: '0012'}
]},
{name: 'Timely Filing', id: '12', triages: [
{name: 'Verify Appeal/Documentation Submitted within Filing Limits', id: '001'},
{name: 'Verify Claim Submitted within Filing Limits', id: '002'}
], actions: [
{name: 'Initiated Handoff', id: '0011'},
{name: 'Called Patient to Resolve', id: '0012'}
]},
{name: 'Clinical Medical Necessity', id: '13', triages: [
{name: 'Review Charge(s) in Question', id: '001'},
{name: 'Verify With Payer to Determine Root Cause', id: '002'}
], actions: [
{name: 'Initiated Handoff', id: '0011'},
{name: 'Called Patient to Resolve', id: '0012'},
{name: 'Called Payer to Resolve Claim', id: '0013'},
{name: 'Applied Contractual/Adjustment', id: '0014'}
]},
{name: 'Skilled Nursing Facility', id: '14', triages: [
{name: 'Confirm SNF Denial', id: '001'}
], actions: [
{name: 'Initiated Handoff', id: '0011'},
{name: 'Rebilled SNF Facility', id: '0012'},
{name: 'Called SNF Facility', id: '0013'}
]}
]},
{name: "Credit Defect", id: "3", subcategories: [
{name: 'Credit', id: '01', triages: [
{name: 'Review All Charges/Corrections', id: '01'},
{name: 'Review EOB for Duplicate Payments', id: '02'}
], actions: [
{name: 'Called Patient to Resolve', id: '01'},
{name: 'Submitted Write-Off Request', id: '02'}
]}
]},
{name: "Uncategorized Defect", id: "4", subcategories: [
{name: 'Potential Defect', id: '01', triages: [
{name: 'Verify Claim Was Submitted to Payer', id: '01'},
{name: 'Verify if More Specific Category Applies', id: '02'}
], actions: [
{name: 'Overrode Defect Category', id:'01'},
{name: 'Initiated Handoff', id:'02'},
{name: 'Called Patient to Resolve', id:'03'},
{name: 'Contacted Payer to Resolve Claim', id:'04'}
]},
{name: 'Supervisor Approved Exceptions', id: '02', triages: [
{name: 'Verify Exception with Supervisor', id: '01'},
{name: 'Confirm Follow Up Date with Supervisor', id: '02'}
], actions: [
{name: 'Next Action Date (30 Days)', id:'01'},
{name: 'Next Action Date (60 Days)', id:'02'}
]}
]}];
}
<!--HTML -->
<body ng-app ng-controller="MainCtrl">
<div class="container-fluid">
<div>
<select class="form-control" ng-model="selectedParent" ng-options="p as p.name for p in items" ng-change="selectedChild=null">
<option value="">-- Choose Parent --</option>
</select>
</div>
<div>
<select class="form-control" ng-model="selectedChild" ng-disabled="!selectedParent" ng-options="c as c.name for c in selectedParent.subcategories" ng-change="selectedGrandchild=null">
<option value="">-- Choose Child --</option>
</select>
</div>
<div>
<select class="form-control" ng-model="selectedGrandchild1" ng-disabled="!selectedChild" ng-options="gc as gc.name for gc in selectedChild.triages">
<option value="">-- Choose Grandchild --</option>
</select>
</div>
<div>
<select class="form-control" ng-model="selectedGrandchild2" ng-disabled="!selectedChild" ng-options="gc as gc.name for gc in selectedChild.actions">
<option value="">-- Choose Grandchild --</option>
</select>
</div>
</div>
</body>
http://embed.plnkr.co/Q6zHrrzhUe0SLWAhcxKY/
Can anyone help or point me in the right direction?
I would do it with a ng-repeat if I understand you correctly, like:
<div ng-repeat="triage in selectedChild.triages track by $index">
<label for="triage{{$index}}">{{triage.name}}</label>
<input id="triage{{$index}}" type="checkbox" ng-model="triage.Selected">
</div>
Here is my try to understand your wishes:
https://plnkr.co/edit/ePjs9T5g6KgWOyRJF1C4?p=preview