问题描述
项目需要展示复选框列表,选中复选框列表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>
请问有什么问题,欢迎指正,谢谢大家。
问题解答
回答1:既然用了angular,为什么还要用jquery的思路去写代码呢在input上绑上ng-model可以监听选中状态,然后通过model比对去控制另一个input的选中与否通过数据去控制UI渲染,这是ng这类框架的理念