jquery – checklist-model kann bei Verwendung von attr keine geprüften Objekte in checklist-model schreiben

Question

Das Projekt muss eine Kontrollkästchenliste anzeigen, ein Element in der Kontrollkästchenliste A auswählen und das entsprechende Element in der Kontrollkästchenliste B automatisch aktivieren. Wenn derzeit die Checklist-Model-Komponente verwendet wird, wird der Wert bei der Überprüfung eines Elements in selectedLists gespeichert. Jetzt kann eine Überprüfung durchgeführt werden, aber wenn das Element in B automatisch überprüft wird, wird der ausgewählte Wert nicht in selectedLists geschrieben.

Veröffentlichen Sie jetzt den Code, herzlich willkommen zur Diskussion

HTML-Code

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

Wenn Sie Fragen haben, korrigieren Sie mich bitte. Vielen Dank an alle.

Answer 1

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