jquery - 使用attr时，checklist-model不能将勾选的对象写入checklist-model

Question

项目需要展示复选框列表，选中复选框列表A中的某一项，自动勾选复选框列表B中的对应项。目前使用checklist-model组件，当勾选某一项时，将值存到selectedLists。现在勾选是可以实现了，不过当自动勾选B中的项目时，没有将选中的值写到selectedLists中。

现在把代码贴出来，欢迎探讨

html代码

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

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

请问有什么问题，欢迎指正，谢谢大家。

Answer 1

既然用了angular，为什么还要用jquery的思路去写代码呢
在input上绑上ng-model可以监听选中状态，然后通过model比对去控制另一个input的选中与否
通过数据去控制UI渲染，这是ng这类框架的理念