jquery - checklist-model cannot write checked objects to checklist-model when using attr

Question

The project needs to display a checkbox list. Select an item in checkbox list A and automatically check the corresponding item in checkbox list B. Currently using the checklist-model component, when an item is checked, the value is stored in selectedLists. Now checking can be achieved, but when the item in B is automatically checked, the selected value is not written to selectedLists.

Post the code now, welcome to discuss

htmlcode

<p class='panel-body' id='aList'>
    <p ng-repeat='aList in aLists'>
        <input type="checkbox" ng-click='show($event,aList.id)'>{{aList.name}}
    </p>
</p>
<p class='panel-body' id='bList'>
    <p ng-repeat='bList in bLists track by $index'>
        <input type="checkbox" checklist-model='selectedLists' checklist-value='bList' 
               data-parent-id='{{bList.id}}'>
        {{bList.name}}
    </p>
</p>

js code

<script type="text/javascript">
    $scope.selectedLists= [];
    
    $scope.show = function(event,id){
    var checkBox = $(event.target);
    var cValue = id;
    var isCheck = checkBox.prop('checked');
    $("#bList input").each(function(){
        if(cValue == $(this).data('stationId')){
            $(this).prop('checked',isCheck);//这里设置勾选状态
        }
    });
}
</script>

If you have any questions, please correct me. Thank you all.

Answer 1

Since angular is used, why should we use jquery ideas to write code?
Tie ng-model to the input to monitor the selected status, and then use model comparison to control whether another input is selected
Control through data UI rendering, this is the concept of frameworks like ng