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這類框架的理念