如何将选择变成级联下拉列表的复选框 - Angular

Question

我有一个工作演示，我可以在其中创建基于父项的级联下拉菜单。我想做的是让级联下拉复选框的孙子而不是选择。我尝试使用带有类似标记的 ng-repeat，但在加载 json 时遇到了问题。

这是我的工作级联下拉列表的示例：

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

任何人都可以帮助我或指出正确的方向吗？

Answer 1

如果我理解正确的话，我会使用 ng-repeat，例如：

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

这是我试图理解您的愿望：
https://plnkr.co/edit/ePjs9T5g6KgWOyRJF1C4?p=preview

Answer 2

使用ng-repeat生成复选框

<div ng-repeat="p in items">
  <label>{{p.name}}:
    <input type="checkbox" ng-model="parentChecked[$index]" ng-click="setSelectedParent(parentChecked, $index, p)">
  </label>
</div>

在你的 JS 中

    $scope.parentChecked = [];
    $scope.setSelectedParent = function(parentChecked, $index, p){
      console.log('aaaaaa', parentChecked[$index]);
        parentChecked[$index] = !parentChecked[$index];
        $scope.selectedChild=null;
        if(parentChecked[$index]){
            $scope.selectedParent = p;
        }else{
            $scope.selectedParent = null;
        }

    }

这是plnkr

https://plnkr.co/edit/DvYCjELXGRKjWxiHrxVV?p=preview

如何将选择变成级联下拉列表的复选框 - Angular

How to turn selects into checkboxes for Cascading Dropdown - Angular

json

cascadingdropdown

angularjs