選択をカスケードドロップダウンのチェックボックスに切り替える方法 - 角度

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> 

ここでは、あなたの願いを理解するための私の試みです：チェックボックスを生成するためのNGリピート
https://plnkr.co/edit/ePjs9T5g6KgWOyRJF1C4?p=preview

Answer 2

使用

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

In Your JS

ここでは0

$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